LiLongLong
6 months ago
11 changed files with 557 additions and 293 deletions
-
46src/components/HelloWorld.vue
-
59src/components/OverlayModal.vue
-
162src/views/addLiquid/index.vue
-
73src/views/components/chooseAcidDlg.vue
-
0src/views/graphite/components/AddLiquid.vue
-
101src/views/graphite/components/CarfList.vue
-
2src/views/graphite/components/HeatPosition.vue
-
2src/views/graphite/components/index.ts
-
57src/views/graphite/index.vue
-
2src/views/liquidConfig/index.vue
@ -1,46 +0,0 @@ |
|||
<script setup lang="ts"> |
|||
import { ref } from "vue"; |
|||
import { showToast } from "vant"; |
|||
|
|||
defineProps<{ |
|||
msg: string; |
|||
}>(); |
|||
const value = ref<number>(50); |
|||
const onChange = (value: number) => showToast("当前值：" + value); |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="greetings"> |
|||
<h1 class="green">{{ msg }}</h1> |
|||
<h3> |
|||
You’ve successfully created a project with |
|||
<a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> + |
|||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next? |
|||
</h3> |
|||
<span class="text-lg font-medium">{{ value }}</span> |
|||
<van-slider class="my-8" :step="0.5" v-model="value" @change="onChange" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.greetings { |
|||
--van-slider-bar-height: 6px; |
|||
--van-slider-button-width: 32px; |
|||
--van-slider-button-height: 32px; |
|||
} |
|||
h1 { |
|||
font-weight: 500; |
|||
font-size: 2.6rem; |
|||
position: relative; |
|||
top: -10px; |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 1.2rem; |
|||
} |
|||
|
|||
.greetings h1, |
|||
.greetings h3 { |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
<template> |
|||
<van-overlay :show="visible" style="z-index: 999;"> |
|||
<div class="overlay_modal" > |
|||
<slot></slot> |
|||
</div> |
|||
</van-overlay> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, watch } from "vue" |
|||
const emits = defineEmits(['confirm', 'changeVisible']) |
|||
|
|||
const props = defineProps({ |
|||
title:{ |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
visible:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
list:{ |
|||
type: Array, |
|||
default: ()=>[] |
|||
}, |
|||
width:{ |
|||
type:String, |
|||
default:'32rem' |
|||
}, |
|||
height:{ |
|||
type:String, |
|||
default:'25rem' |
|||
}, |
|||
item:{ |
|||
type: Object |
|||
} |
|||
}) |
|||
|
|||
const columnsList = ref<any>(props.list) |
|||
|
|||
const onSubmit = () => { |
|||
emits('confirm') |
|||
} |
|||
|
|||
const onCancel = ()=> { |
|||
emits("changeVisible", false) |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.overlay_modal{ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
margin-top: 12.5rem; |
|||
} |
|||
.picker_title{ |
|||
font-size: 2rem; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,73 @@ |
|||
<template> |
|||
<van-overlay :show="visible" style="z-index: 999;"> |
|||
<div class="overlay_modal" > |
|||
<div class="overlay_title">液体选择</div> |
|||
<div class="overlay_content"> |
|||
|
|||
</div> |
|||
<div class="overlay_btn"> |
|||
<van-button type="primary" class="btn ok">确定</van-button> |
|||
<van-button class="btn cancel" @click="onCancel">取消</van-button> |
|||
</div> |
|||
</div> |
|||
</van-overlay> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, watch, defineExpose } from "vue" |
|||
|
|||
const visible = ref(false) |
|||
const emits = defineEmits(['confirm', 'changeVisible']) |
|||
const props = defineProps({}) |
|||
|
|||
const showDlg = ()=>{ |
|||
visible.value = true; |
|||
} |
|||
|
|||
const onCancel = ()=> { |
|||
visible.value = false; |
|||
} |
|||
defineExpose({ |
|||
showDlg |
|||
}); |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@use "@/assets/style/mixin.scss" as *; |
|||
.overlay_modal{ |
|||
width:56.25rem; |
|||
height: 32.5rem; |
|||
margin-left: 19.75rem; |
|||
margin-top: 12.5rem; |
|||
background: #ffffff; |
|||
|
|||
.overlay_content{ |
|||
width: 53.125rem; |
|||
height: 23.125rem; |
|||
} |
|||
|
|||
.overlay_title{ |
|||
width: 8.5rem; |
|||
height: 1.875rem; |
|||
padding-left: 1.5rem; |
|||
padding-top: 1.875rem; |
|||
font-size: 1.25rem; |
|||
} |
|||
|
|||
.overlay_btn{ |
|||
.btn{ |
|||
width: 13.625rem; |
|||
height: 2.875rem; |
|||
font-size: 1.25rem; |
|||
|
|||
} |
|||
|
|||
.ok{ |
|||
margin-left: 14.375rem; |
|||
} |
|||
|
|||
.cancel{ |
|||
margin-left: 2.375rem; |
|||
} |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<div class="carf"> |
|||
<div class="carf_title">选择工艺</div> |
|||
<div> |
|||
<div class="carf_column_name">工艺名称</div> |
|||
<div v-for="item in list" class="carf_item" @click="onChooseCarf(item)"> |
|||
<div :style="`background: ${currentItem?.id == item.id ? activeColor : ''}`" class="carf_li">{{ item.name }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="overlay_btn"> |
|||
<van-button type="primary" class="btn ok">确定</van-button> |
|||
<van-button class="btn cancel" @click="onCancel">取消</van-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, onMounted } from 'vue' |
|||
const currentItem = ref() |
|||
const activeColor = ref('#ffffff') |
|||
const list = ref() |
|||
const emits = defineEmits(['changeVisible']) |
|||
onMounted(()=>{ |
|||
list.value = [{ |
|||
id: 10, |
|||
name: '硫酸溶解法1' |
|||
},{ |
|||
id: 20, |
|||
name: '硫酸溶解法2' |
|||
},{ |
|||
id: 30, |
|||
name: '硫酸溶解法3' |
|||
}] |
|||
}) |
|||
|
|||
const onChooseCarf = (data:any) => { |
|||
activeColor.value = '#d9d9d9' |
|||
currentItem.value = data |
|||
} |
|||
|
|||
const onCancel = () => { |
|||
emits('changeVisible') |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.carf{ |
|||
height: 27.5rem; |
|||
width: 23.75rem; |
|||
background: #ffffff; |
|||
|
|||
.carf_title{ |
|||
width: 5.25rem; |
|||
height: 1.875rem; |
|||
margin-left: 1.25rem; |
|||
margin-top: 1.875rem; |
|||
color: #40474E; |
|||
font-weight: 500; |
|||
font-size: 1.25rem; |
|||
} |
|||
|
|||
} |
|||
|
|||
.carf_column_name{ |
|||
width: 5rem; |
|||
height: 1.875rem; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
margin-left: 2rem; |
|||
margin-top: .625rem; |
|||
} |
|||
|
|||
.carf_item{ |
|||
.carf_li{ |
|||
display: flex; |
|||
align-items: center; |
|||
width: 23.75rem; |
|||
height: 3.125rem; |
|||
padding-left: 1.875rem; |
|||
font-size: 1.25rem; |
|||
color: rgba(0, 0, 0, 0.85); |
|||
} |
|||
} |
|||
|
|||
.overlay_btn{ |
|||
.btn{ |
|||
width: 6.875rem; |
|||
height: 2.875rem; |
|||
font-size: 1.25rem; |
|||
margin-top: 6.875rem; |
|||
} |
|||
|
|||
.ok{ |
|||
margin-left: 5rem; |
|||
} |
|||
|
|||
.cancel{ |
|||
margin-left: 2.375rem; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
@ -1,4 +1,4 @@ |
|||
|
|||
export {default as HeatPosition} from './HeatPosition.vue' |
|||
export {default as TakePickture} from './TakePickture.vue' |
|||
export { default as AddWaste} from './AddWaste.vue' |
|||
export { default as AddLiquid} from './AddLiquid.vue' |
|||
@ -1,3 +1,3 @@ |
|||
<template> |
|||
<div>溶液配置</div> |
|||
<div class="component-page">溶液配置</div> |
|||
</template> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue