detail更新

src/component/DetailCopy/detailRight/editPrintElement.vue

@@ -0,0 +1,125 @@
+<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>