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