125 lines
2.9 KiB
Vue
125 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div class="editPrintElement">
|
||
|
|
<div class="printOverallBtn">
|
||
|
|
<div class="overallSlogin">
|
||
|
|
<div
|
||
|
|
class="habit_Overal_Single_text"
|
||
|
|
:class="{ active: !overallSingle }"
|
||
|
|
>
|
||
|
|
{{ $t('DesignPrintOperation.Overall') }}
|
||
|
|
</div>
|
||
|
|
<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
|
||
|
|
<div
|
||
|
|
class="habit_Overal_Single_text"
|
||
|
|
:class="{ active: overallSingle }"
|
||
|
|
>
|
||
|
|
{{ $t('DesignPrintOperation.Single') }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-show="!overallSingle" class="habit_System_Designer">
|
||
|
|
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
|
||
|
|
<a-slider id="system_silder"
|
||
|
|
class="system_silder"
|
||
|
|
:min="20"
|
||
|
|
:max="1000"
|
||
|
|
v-model:value="systemDesignerPercentage"
|
||
|
|
:tip-formatter="formatter"
|
||
|
|
>
|
||
|
|
</a-slider>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||
|
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
export default defineComponent({
|
||
|
|
components:{
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
type: {
|
||
|
|
type: String,
|
||
|
|
default: 'print',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props,{emit}) {
|
||
|
|
const store = useStore();
|
||
|
|
const editPrintElementDom = reactive({
|
||
|
|
|
||
|
|
})
|
||
|
|
const editPrintElementData = reactive({
|
||
|
|
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||
|
|
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||
|
|
overallSingle:false,
|
||
|
|
systemDesignerPercentage:0,
|
||
|
|
})
|
||
|
|
const setOveralSingle = ()=>{}
|
||
|
|
const formatter = (value:any)=>{
|
||
|
|
return `${value}%`;
|
||
|
|
}
|
||
|
|
return{
|
||
|
|
...toRefs(editPrintElementDom),
|
||
|
|
...toRefs(editPrintElementData),
|
||
|
|
setOveralSingle,
|
||
|
|
formatter,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
provide() {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.editPrintElement{
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
flex-direction: column;
|
||
|
|
> .printOverallBtn{
|
||
|
|
display: flex;
|
||
|
|
> .overallSlogin{
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.habit_Overal_Single_text {
|
||
|
|
font-weight: 600;
|
||
|
|
color: rgba(0, 0, 0, 0.5);
|
||
|
|
&.active {
|
||
|
|
color: rgba(0, 0, 0, 0.7);
|
||
|
|
// font-weight: 900;
|
||
|
|
// transform: scale(1.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.habit_System_Designer {
|
||
|
|
transform: scale(.8);
|
||
|
|
width: 100%;
|
||
|
|
.ant-slider-track,
|
||
|
|
.ant-slider-rail {
|
||
|
|
background-color: #e1e1e1;
|
||
|
|
border-radius: calc(0.5rem*1.2);
|
||
|
|
}
|
||
|
|
.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
|
||
|
|
.ant-slider-handle {
|
||
|
|
background-color: #2d2e76 !important;
|
||
|
|
border: none !important;
|
||
|
|
}
|
||
|
|
.ant-slider-handle:hover{
|
||
|
|
box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
|
||
|
|
}
|
||
|
|
.habit_System_Designer_text{
|
||
|
|
font-size: calc(1.6rem*1.2);
|
||
|
|
color: rgba(0, 0, 0, 0.7);
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|