zhangjiming
5 months ago
9 changed files with 25 additions and 249 deletions
-
1src/assets/icon_del_s.svg
-
218src/views/addLiquid/index.vue
-
2src/views/expeRecord/components/ExpeDetail.vue
-
2src/views/graphite/components/CraftList.vue
-
2src/views/liquidConfig/components/AddLiquid.vue
-
2src/views/oreManage/components/AddOre.vue
-
4src/views/oreManage/components/CraftConfig.vue
-
41src/views/oreManage/components/StepItemEx.vue
-
2src/views/userManage/components/AddUser.vue
@ -0,0 +1 @@ |
|||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="33" height="33" viewBox="0 0 33 33"><defs><clipPath id="master_svg0_685_8832"><rect x="0" y="0" width="33" height="33" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_685_8832)"><g><path d="M28.5707296875,29.2627375C27.6653296875,30.1682375,26.1906296875,30.1682375,25.2831296875,29.2627375L4.4580476875,8.4376975C3.5526096875,7.5301975,3.5505466875,6.0575675,4.4580476875,5.1500705C5.3614196875,4.2425705,6.8361096875000005,4.2425705,7.7477296875,5.1500705L28.5707296875,25.9730375C29.4761296875,26.8847375,29.4803296875,28.3552375,28.5707296875,29.2627375ZM28.5460296875,8.4273875L7.7229796875000005,29.2503375C6.8134196875,30.1599375,5.3407996875,30.1599375,4.4332966875,29.2503375C3.5257966875,28.3449375,3.5257966875,26.8743375,4.4353596875,25.9627375L25.2583296875,5.1418205C26.1679296875,4.2343205,27.6426296875,4.2343205,28.5460296875,5.1397585C29.4555296875,6.0472575,29.4514296875,7.519887499999999,28.5460296875,8.4273875Z" fill="#7F7F7F" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></g></svg> |
||||
@ -1,218 +0,0 @@ |
|||||
<template> |
|
||||
<div class="component-page add_liquid_bottle"> |
|
||||
<div v-for="(corros, index) in corrosionList" class="add_liquid liquid_w"> |
|
||||
<div class="config_title" @click="onChooseLiquid(corros)"> |
|
||||
<div class="config_name"> |
|
||||
<div>{{ index + 1 }} {{ corros.name }}</div> |
|
||||
<img :src="ArrowSvg" class="arrow_img"/> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="bottle_ml"> |
|
||||
<div class="liquid_pos"> |
|
||||
<div class="contail_percentage"></div> |
|
||||
<div class="liquid_percent bottle_wd"></div> |
|
||||
<div class="percent_num">{{ corros.ml }}</div> |
|
||||
</div> |
|
||||
<div class="ml_name"> |
|
||||
{{ `${corros.ml}/${corros.totalMl}` }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<choose-acid-dlg ref="chooseAcidDlg"></choose-acid-dlg> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts" setup> |
|
||||
import { ref } from 'vue' |
|
||||
import ChooseAcidDlg from '../components/chooseAcidDlg.vue' |
|
||||
import ArrowSvg from '@/assets/arrow.svg' |
|
||||
interface Corrosion { |
|
||||
} |
|
||||
const visible = ref(false) |
|
||||
const chooseAcidDlg = ref() |
|
||||
const corrosion = ref<Corrosion>() |
|
||||
const temp_list = [{ |
|
||||
text: '硫酸1', |
|
||||
value: '11' |
|
||||
},{ |
|
||||
text: '硫酸2', |
|
||||
value: '12' |
|
||||
},{ |
|
||||
text: '硫酸3', |
|
||||
value: '13' |
|
||||
},{ |
|
||||
text: '硫酸4', |
|
||||
value: '14' |
|
||||
}] |
|
||||
const selectList = ref(temp_list) |
|
||||
const list = [{ |
|
||||
name:'硝酸', |
|
||||
id: 10, |
|
||||
ml: '100ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: '500ml' |
|
||||
},{ |
|
||||
name:'硫酸', |
|
||||
id: 20, |
|
||||
ml: '200ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: "500ml" |
|
||||
},{ |
|
||||
name:'硫酸', |
|
||||
id: 20, |
|
||||
ml: '200ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: "500ml" |
|
||||
},{ |
|
||||
name:'硫酸', |
|
||||
id: 20, |
|
||||
ml: '200ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: "500ml" |
|
||||
},{ |
|
||||
name:'硫酸', |
|
||||
id: 20, |
|
||||
ml: '200ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: "500ml" |
|
||||
},{ |
|
||||
name:'硫酸', |
|
||||
id: 20, |
|
||||
ml: '200ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: "500ml" |
|
||||
},{ |
|
||||
name:'硫酸', |
|
||||
id: 20, |
|
||||
ml: '200ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: "500ml" |
|
||||
},{ |
|
||||
name:'硫酸', |
|
||||
id: 20, |
|
||||
ml: '200ml', |
|
||||
color: '#26D574', |
|
||||
totalMl: "500ml" |
|
||||
}] |
|
||||
|
|
||||
const corrosionList = ref(list) |
|
||||
|
|
||||
const onChooseLiquid = (item={}) => { |
|
||||
visible.value = true; |
|
||||
corrosion.value = item; |
|
||||
chooseAcidDlg.value.showDlg() |
|
||||
} |
|
||||
|
|
||||
const changeVisible = (value=false) => { |
|
||||
visible.value = value; |
|
||||
} |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
@use "@/assets/style/mixin.scss" as *; |
|
||||
.add_liquid_bottle{ |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
|
|
||||
.add_liquid{ |
|
||||
background: #F4F9FF; |
|
||||
width: 12.5rem; |
|
||||
height: 13.5rem; |
|
||||
border:1px solid #275EFB; |
|
||||
margin-left: 4.25rem; |
|
||||
margin-top: 5rem; |
|
||||
border-radius: 10px; |
|
||||
@media (min-width: $md) { |
|
||||
margin-top: 32px; |
|
||||
} |
|
||||
.config_title{ |
|
||||
width: 12.5rem; |
|
||||
height: 2.5rem; |
|
||||
background: rgba(25, 137, 250, 0.1216); |
|
||||
padding-top: .5rem; |
|
||||
.config_name{ |
|
||||
width: 7.8rem; |
|
||||
height: 1.625rem; |
|
||||
background: #FFFFFF; |
|
||||
margin-left: 2.5rem; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
gap: 1.625rem; |
|
||||
.arrow_img{ |
|
||||
width: .5rem; |
|
||||
height: .75rem; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.bottle_ml{ |
|
||||
|
|
||||
.liquid_pos{ |
|
||||
position: relative; |
|
||||
width: 5.125rem; |
|
||||
height: 7.25rem; |
|
||||
margin-top: 1.125rem; |
|
||||
margin-left: 3.75rem; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
.bottle_wd{ |
|
||||
height: 30%; |
|
||||
background-color:red; |
|
||||
width: 5.15rem; |
|
||||
} |
|
||||
} |
|
||||
.liquid_status{ |
|
||||
height: 1rem; |
|
||||
font-family: Source Han Sans; |
|
||||
font-size: 1rem; |
|
||||
font-weight: 500; |
|
||||
color: #40474E; |
|
||||
padding-top: 20px; |
|
||||
} |
|
||||
|
|
||||
.contail_percentage{ |
|
||||
position: absolute; |
|
||||
width: 5rem; |
|
||||
height: 7.125rem; |
|
||||
background-image: url('@/assets/container.svg'); |
|
||||
background-size: cover; |
|
||||
background-position: center; |
|
||||
z-index: 1; |
|
||||
border-radius: 10px; |
|
||||
} |
|
||||
|
|
||||
.liquid_percent { |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
width: 2.625rem; |
|
||||
background-color: blue; |
|
||||
opacity: 0.5; |
|
||||
z-index: 2; |
|
||||
border-radius: 0 0 10px 10px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
.percent_num{ |
|
||||
font-size: 30px; |
|
||||
position: relative; |
|
||||
z-index: 2; |
|
||||
} |
|
||||
.ml_name{ |
|
||||
width: 4.125rem; |
|
||||
height: 1.625rem; |
|
||||
background: #FFFFFF; |
|
||||
margin-left: 3.75rem; |
|
||||
text-align: center; |
|
||||
margin-top: 15px; |
|
||||
border-radius: 6.25rem; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media screen and (max-width: 1120px){ |
|
||||
.add_liquid{ |
|
||||
margin-left: 20px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue