aida_front/src/component/Detail/habit.vue

<template>
    <div class="habit">
		<div v-show="openType.habit" class="habit_mask"></div>
        <div class="habit_button Guide_1_27" @click.stop="setOpenType('habit')" >
			{{ $t('Habit.Workspace') }}
            <i class="fi fi-bs-angle-down"></i>
        </div>
        <div class="habit_content Guide_1_28" :class="[driver__.driver?'showEvents':'']" v-fade="openType.habit">
            <div class="habit_title">
                <h3>{{ $t('Habit.WorkspaceSetting') }}</h3>
                <div class="habit_intro">{{ $t('Habit.settingWorkspace') }}</div>
            </div>
            <div class="habit_type" trigger="['click']" >
                <a-dropdown placement="bottomRight" @click.stop="setOpenType('workspace')">
                    <a-button>
                        <UserOutlined />
                        {{workspaceItem.workSpaceName}}
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
				<div class="habit_model_show habit_workspace_show"  v-fade="openType.workspace">
					<ul class="habit_model_list">
						<li v-for="item,index in workspace.workspaceList">
							<div @click.stop="setWorkspace(item.id)" v-show="!item.putName">{{ item.workSpaceName }}</div>
							<input v-show="item.putName" type="text" v-model="workspaceItemName">
							<i @click.stop="putName(index,'put')" v-show="!item.putName" class="fi fi-rr-edit"></i>
							<i @click.stop="putName(index,'affirm')" v-show="item.putName" class="fi fi-br-check"></i>
							<i @click.stop="putName(index,'delete')" class="fi fi-rr-trash"></i>
						</li>
						<li @click="newWorkspace" class="newWorkspace">
							<input v-show="openType.addWorkspace" type="text" v-model="workspaceItemName">
							<i @click.stop="putName(-1,'affirm')" v-show="openType.addWorkspace" class="fi fi-br-check"></i>
							<div v-show="!openType.addWorkspace">+</div>
						</li>
						<div v-show="total > workspace.workspaceList?.length && total != 0" class="material_content_list_loding" v-observe>
							<img src="@/assets/images/homePage/loading.gif" alt="">
						</div>
					</ul>
				</div>
            </div>
			<div class="habit_Overal_Single" :class="[driver__.index == 2?driver__.driver?'Guide_active':'':'']">
				<a-dropdown @click.stop="setOpenType('sex')">
                    <a-button>
                        <UserOutlined />
                        {{ workspaceItem?.sexEnum?.value }}
                        <!-- {{ workspaceItem.sex.label }} -->
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
				<div class="habit_model_show habit_sex_show"  v-fade="openType.sex">
					<ul class="habit_model_list">
						<li v-for="item,index in sex">
							<div @click.stop="setSex(item)">{{ item.value }}</div>
						</li>
					</ul>
				</div>
            </div>
            <div class="habit_Overal_Single">
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: !workspaceItem.overallSingle }"
                >
				{{ $t('Habit.Overall') }}
                </div>
                <a-switch @click="setOverallSingle" v-model:checked="workspaceItem.overallSingle" />
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: workspaceItem.overallSingle }"
                >
				{{ $t('Habit.Single') }}
                </div>
            </div>
            <div class="habit_habit_singleton" v-show="workspaceItem.overallSingle">
                <a-dropdown @click.stop="setOpenType('singleton')">
                    <a-button>
                        <UserOutlined />
                        {{ workspaceItem?.positionEnum?.value }}
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
				<div class="habit_model_show habit_singleton_show"  v-fade="openType.singleton">
					<ul class="habit_model_list">
						<li v-for="item,index in singleTypeList">
							<div @click.stop="setSingle(item)">{{ item.value }}</div>
						</li>
					</ul>
				</div>
            </div>
			<div class="habit_System_Designer">
                <a-slider id="system_silder"
                    v-model:value="workspaceItem.systemDesignerPercentage"
                    @afterChange="systemDesigner"
					:tip-formatter="formatter"
				>
                </a-slider>
                <div class="habit_System_Designer_text_max">
                    <div class="habit_System_Designer_text">{{ $t('Habit.System') }}</div>
                    <div class="habit_System_Designer_text">{{ $t('Habit.Designer') }}</div>
                </div>
            </div>
			<div class="habit_model" :class="[driver__.index == 3?driver__.driver?'Guide_active':'':'']">
                <a-dropdown placement="bottomRight"
					trigger="['click']"
					@click.stop="setOpenType('model')"
					>
                    <a-button>
                        <UserOutlined />
                        {{ $t('Habit.Mannequin') }}
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
            </div>
			<div id="modelShow" class="habit_model_show Guide_1_29" :class="[driver__.driver?'showEvents':'']" v-fade="openType.model">
				<div class="habit_btn">
					<div class="model_current">
					<div class="model_text">{{ $t('Habit.Current') }}</div>
					<div class="model_img">
						<img :src="workspaceItem.mannequinUrl" alt="">
					</div>
				</div>
				<div class="model_Designer">
					<div class="model_text">
						<div
							class="habit_System_Seleves_text"
							:class="{ active: !systemSeleves }"
						>
						{{ $t('Habit.System') }}
						</div>
						<a-switch :disabled="mannequins?.[0]==null?true:false" v-model:checked="systemSeleves" />
						<div
							class="habit_System_Seleves_text"
							:class="{ active: systemSeleves }"
						>
						{{ $t('Habit.User') }}	
						</div>
					</div>
					<div class="model_img" v-show="systemSeleves" v-mousewheel>
						<div class="model_img_item">
							<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
								<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')">
							</div>
						</div>
					</div>
					<div class="model_img" v-show="!systemSeleves" v-mousewheel>
						<div class="model_img_item">
							<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
								<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
							</div>
						</div>
					</div>
				</div>
				</div>
			</div>
        </div>
    </div>
</template>
<script lang="ts">
import { useStore } from "vuex";
import { defineComponent, createVNode,nextTick, computed,ref,Ref} from "vue";
import { UserOutlined, DownOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
// import type { MenuProps } from "ant-design-vue";
import { Modal,message,Upload} from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from "vue-i18n";
import { position } from "html2canvas/dist/types/css/property-descriptors/position";
export default defineComponent({
    components: {
        DownOutlined,
        UserOutlined,
    },
	setup(){
        const store = useStore();
		let workspaceItem:any = ref({
			id:'',
			id_:1,
			workSpaceName:"工作台1",
			putName:false,
			systemDesignerPercentage:30,
			position:'',
			sex:'',
			overallSingle:false,
			mannequinUrl:'',
			mannequinType:'',
			mannequinId:'',
		})
		let mannequins:any = ref([{},{}])
		let systemSeleves= ref(false);
		let total= ref(0);
		let openType:any = ref({
			workspace:false,
			singleton:false,
			habit:false,
			model:false,
			addWorkspace:false,
			sex:false
		})
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
		let workspace:any = ref({
			
		});
		let workspaceItemName = ref('')//设置单独name公共使用
		let singleTypeList:any = ref([
			
		])
		let sex = ref([
		])
		let position = ref([
			{
				name:'FemalePosition',
				value:[],
			},{
				name:'MalePosition',
				value:[],
			},
		])
		
		const {t} = useI18n()
	return{
			systemSeleves,
			mannequins,
			openType,
			total,
			driver__,
			workspace,
			workspaceItem,
			workspaceItemName,
			singleTypeList,
			sex,
			position,
			t
		}
    },
	watch:{
		'openType.habit':{
			handler(newVal:any,oldVal:any){
				// this.store.state.Workspace.workspace
				if(!newVal){
					if(!this.workspaceItem.overallSingle){
						this.workspaceItem.position = 'Overall'
					}
					let data = this.workspaceItem
					delete data.isLastIndex
					this.putWorkspace(data,'')
					this.openType.model = false
					// this.getDetail(this.workspaceItem.id)
					this.store.commit("setWorkspace", this.workspaceItem);
				}
			}
		},
		
		driver__:{
			handler(newVal:any,oldVal:any){
				if(newVal.index>=5){
					this.openType.habit = false
				}
			}
		},
		'workspaceItem.id_':{
			handler(newVal:any,oldVal:any){
				this.workspace.workspaceList.forEach((v:any)=>{
					if(v.id == this.workspaceItem.id_){
						this.workspaceItem = v
						this.workspaceItem.id_ = v.id
					}
					if(v.id == oldVal){
						delete v.isLastIndex
						this.putWorkspace(v,newVal)
						this.getDetail(newVal)
					}
				})
				this.getMannequins()
			}
		},
		'openType.workspace':{
			handler(newVal:any,oldVal:any){
				this.openType.addWorkspace = false
				this.workspace.workspaceList.forEach((item:any) => {
					item.putName = false
				});
				// this.workspace.workspaceList.forEach((v:any)=>{
				// 	if(v.id == this.workspaceItem.id_){
				// 		this.workspaceItem = v
				// 		this.workspaceItem.id_ = v.id
				// 	}
				// 	if(v.id == oldVal){
				// 		delete v.isLastIndex
				// 		this.putWorkspace(v,newVal)
				// 		// this.getDetail(newVal)
				// 	}
				// })
			}
		},
		'workspaceItem.overallSingle':{
			handler(newVal:any,oldVal:any){
				if(this.driver__.driver){
					driverObj__.refresh();
				}
			}
		},
		'openType.sex':{
			handler(newVal:any,oldVal:any){
				if(this.driver__.driver && oldVal){
					driverObj__.moveTo(3);
				}
			}
		},
		// 'openType.model':{
		// 	handler(newVal:any,oldVal:any){
		// 		if(this.driver__.driver){
		// 			console.log(213);
					
		// 			driverObj__.refresh();
		// 		}
		// 	}
		// },
		workspaceItem:{
			handler(newVal:any,oldVal:any){
				this.store.commit("setWorkspace", this.workspaceItem);
			}
		}
	},
    data() {
        return {
            store: useStore(),
        };
    },
   async mounted() {
		// new Promise((resolve) => {
		// 	this.getPosition(resolve)
		// })
		await this.getPosition()
		this.getworkspace()
		this.getSex()
	},
	directives:{
		fade:{
			mounted (el,binding) {
				el.addEventListener('click',()=>{
					
				})
			},
			updated (el,model){
				if(model.value){
					el.style.display="block"
					setTimeout(() => {
						el.classList.add("active")
					}, 100);
				}else{
					el.classList.remove("active")
					setTimeout(() => {
					el.style.display="none"
					}, 100);
				}
			}
		},
		mousewheel:{
			mounted (el) {
				el.addEventListener('wheel',(e:WheelEvent)=>{
					let num = 0
					if(e.deltaY > 0){
						num = 25
					}else{
						num = -25
					}
					el.scrollBy(num, 0);
				})
			}
		},
		observe:{
			mounted (el,binding) {
				// console.log(binding.instance);
				const ob = new IntersectionObserver(callback,{
					root:null,
					threshold:[0.1]
				})
				ob.observe(el)
				// this.currentPage = 1
				// this.pageSize = 12
				let this_:any = binding.instance
				function callback(entries:any, observer:any) {
					entries.forEach((entry:any) => {
						if (entry.isIntersecting) {
							this_.getworkspace('di')
						} else {
						}
					});
				}
			},
		},
	},
    methods: {
		async getSex(){
			await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
				if (rv) {
					this.store.commit("setWorkspaceSex", rv);
					this.sex = rv
				}
			})
		},
		setPosition(str:any){
			let num
			if(this.workspaceItem.sexEnum.name == 'Female'){
				num = 0
			}else{
				num = 1
			}
			
			this.singleTypeList = this.position[num].value
			this.store.commit("setWorkspacePosition", this.position[num].value);

			if(str == 'sex'){
				this.workspaceItem.position = this.singleTypeList[0].name
				this.workspaceItem.positionEnum = this.singleTypeList[0]
			}
		},
		async getPosition(){
			await new Promise(async (resolve) => {
				await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'FemalePosition'}}).then((rv: any) => {
					if (rv) {
						this.position[0].value = rv
					}
				})
				await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'MalePosition'}}).then((rv: any) => {
					if (rv) {
						this.position[1].value = rv
					}
				})
				resolve('')
			})
			// this.getworkspace()
			// this.setPosition('')
		},
		getworkspace(){
			// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
			// 	if (rv) {
			// 		console.log(rv,'workspace');
			// 	}
			// })
			let data = {
				page:1,
				size:10,
			}
			// data.page = this.workspace.workspaceList?.[0]?.id != undefined?this.workspace.workspaceList?.length / data.size+1:1
			data.size = this.workspace.workspaceList?.[0]?.id != undefined?this.workspace.workspaceList?.length + data.size+1:10

			Https.axiosPost(Https.httpUrls.workspaceList,data).then((rv: any) => {
				if (rv) {
					rv.page.content.forEach((v:any) => {
						v.id_ = v.id
						if(v.position == "Overall"){
							v.overallSingle = false
						}else{
							v.overallSingle = true
						}
						v.putName = false
						if(v.id ==  (this.workspaceItem.id?this.workspaceItem.id:rv.id)){
							this.workspaceItem = v
							this.setMannequinsSex()
							this.setPosition('')
						}
					});
					this.total = rv.page.total
					this.workspace.id = rv.id
					// if(this.workspace.workspaceList){
					// 	this.workspace.workspaceList.push(...rv.page.content)
					// }else{
					// 	this.workspace.workspaceList = rv.page.content
					// }
					this.workspace.workspaceList = rv.page.content
				}
			})
		},
		getDetail(id:any){//
			Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
				if (rv) {
					// this.getworkspace()
				}
			})
		},
		getMannequins(){//获取模特
			Https.axiosGet(Https.httpUrls.getMannequins,{params:{sex:this.workspaceItem.sex}}).then((rv: any) => {
				if (rv) {
					// rv.forEach((item:any)=>{
					// 	item.type ==
					// })
					if(rv[0].type == 'System'){
						let a = rv[0]
						rv[0] = rv[1]
						rv[1] = a
					}
					this.mannequins = rv
					if(this.mannequins?.[0]==null){
						this.systemSeleves = false
					}
				}
			})
			
		},
		putWorkspace(data:any,index:any){//修改workspace
			Https.axiosPost(Https.httpUrls.workspacesaveOrUpdate,data).then((rv: any) => {
				if (rv) {
					if(index){
						// this.getDetail(index)
					}else{
						this.getworkspace()
					}
					this.workspace.workspaceList[index].workSpaceName = this.workspaceItemName 
					this.workspace.workspaceList[index].putName = false
					this.openType.addWorkspace = false
				}
			}).catch((res)=>{
				this.getworkspace()
            });
		},
		deleteWorkspace(data:any){
			Https.axiosDelete(Https.httpUrls.workspaceRemove,data).then((rv: any) => {
				if (rv) {
					this.getworkspace()
				}
			})
		},
		//
		setOverallSingle(){
			if(this.workspaceItem.overallSingle){
				this.workspaceItem.position = this.singleTypeList[0].name
				this.workspaceItem.positionEnum = this.singleTypeList[0]
			}else{
				this.workspaceItem.position = 'Overall'
			}
		},

		cancelDsign(index:any){
            let _this = this
            Modal.confirm({
                title: _this.t('Habit.jsContent1'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
				wrapClassName:'habit',
				zIndex:999999999,
                centered:true,
                onOk() {
					let data = [{
						id:_this.workspace.workspaceList[index].id,
					}]
					let id = _this.workspace.workspaceList[index].id
					_this.deleteWorkspace(data)
                }
            });
        },
		//修改名字
		putName(index:number,v:string){
			this.workspace.workspaceList.forEach((v:any )=> {
				v.putName = false
			});
			this.openType.addWorkspace = false
			if(v == 'put'){
				this.workspaceItemName = this.workspace.workspaceList[index].workSpaceName
				this.workspace.workspaceList[index].putName = true
			}else if (v == 'delete'){
				this.cancelDsign(index)
				// let data = [{
				// 		id:this.workspace.workspaceList[index].id,
				// 	}]
				// 	let id = this.workspace.workspaceList[index].id
				// 	this.deleteWorkspace(data)
			}else{
				if(this.workspaceItemName == ''){
					message.info(this.t('Habit.jsContent2'));
				}else{
					if(index == -1){
						let data = {
							workSpaceName:this.workspaceItemName,
						}
						this.putWorkspace(data,'')
					}else{
						let data:any
						this.workspace.workspaceList.forEach((item:any)=>{
							if(this.workspace.workspaceList[index].id == item.id){
								// item.putName = true
								data = item
							}
						})
						data.workSpaceName = this.workspaceItemName
						this.putWorkspace(data,'')
						
					}
				}
				
			}
		},
		//设置系统设计占比
        systemDesigner(num: number) {
			this.workspaceItem.systemDesignerPercentage = num
        },
		formatter(value: number) {
			return `${value}%`;
		},

		//根据id设置当前参数
		setWorkspace(num:number){
			this.openType.addWorkspace = false
			this.workspace.workspaceList.forEach((v:any) => {
				v.putName = false
			});
			
			this.workspaceItem.id_ = num
			this.openType.workspace = false
		},
		//新建参数
		newWorkspace(){
			this.workspaceItemName = ''
			this.openType.addWorkspace = true
			this.workspace.workspaceList.forEach((item:any) => {
				item.putName = false
			});
		},
		setSex(v:any){
			this.workspaceItem.sexEnum = v
			this.openType.sex = false
			this.workspaceItem.sex = v.name
			this.getMannequins()
			this.setMannequinsSex()
			this.setPosition('sex')
			
		},
		//设置single & overall
		setSingle(v:any){
			this.openType.singleton = false
			this.workspaceItem.position = v.name
			this.workspaceItem.positionEnum = v

		},
		setMannequins(item:any,str:string){//设置模特
			// this.workspaceItem.mannequinId = item.id
			// this.workspaceItem.mannequinType = str
			// this.workspaceItem.mannequinUrl = item.presignedUrl
			let id
			if(this.workspaceItem.sexEnum.name == 'Female'){
				id = this.workspaceItem.mannequinFemaleId
				this.workspaceItem.femalePresignedUrl = item.presignedUrl
				this.workspaceItem.mannequinFemaleType  = str
				this.workspaceItem.mannequinFemaleId = item.id
			}else if(this.workspaceItem.sexEnum.name == 'Male'){
				id = this.workspaceItem.mannequinMaleId
				this.workspaceItem.malePresignedUrl = item.presignedUrl
				this.workspaceItem.mannequinMaleType  = str
				this.workspaceItem.mannequinMaleId = item.id
			}
			// if(id != item.id){
			if(this.driver__.driver){
				// this.openType.habit = false
				nextTick().then(()=>{
					// driverObj__.moveTo(2);
					driverObj__.moveNext();
					this.openType.model = false

					// driverObj__.moveNext();
				})
			}
			// }
			this.workspaceItem.mannequinUrl = item.presignedUrl
			this.workspaceItem.mannequinType = str
			this.workspaceItem.mannequinId = item.id
		},
		// FEMALE     MALE
		setMannequinsSex(){
			if(this.workspaceItem.sexEnum.name == 'Female'){
				this.workspaceItem.mannequinUrl = this.workspaceItem.femalePresignedUrl
				this.workspaceItem.mannequinType = this.workspaceItem.mannequinFemaleType
				this.workspaceItem.mannequinId = this.workspaceItem.mannequinFemaleId
			}else if(this.workspaceItem.sexEnum.name == 'Male'){
				this.workspaceItem.mannequinUrl = this.workspaceItem.malePresignedUrl
				this.workspaceItem.mannequinType = this.workspaceItem.mannequinMaleType
				this.workspaceItem.mannequinId = this.workspaceItem.mannequinMaleId
			}
		},
		setOpenType(v:string){
			if(v == 'habit'){
				this.openType.habit = !this.openType.habit
				if(this.driver__.driver){
					nextTick().then(()=>{
						driverObj__.moveNext();
						// driverObj__.moveTo(29);

					})
				}
			}else if(v == 'workspace'){
				this.openType.singleton = false
				this.openType.sex = false
				// this.workspace.workspaceList.forEach((v:any) => {
				// 	v.putName = false
				// });
				this.openType.workspace = !this.openType.workspace
			}else if(v == 'model'){
				this.openType.singleton = false
				this.openType.workspace = false
				this.openType.sex = false
				this.openType.model = !this.openType.model
				this.getMannequins()
				if(this.driver__.driver && this.openType.model){
					nextTick().then(()=>{
						driverObj__.moveTo(4);
						// driverObj__.moveNext();
					})
				}
			}else if(v == 'singleton'){
				this.openType.singleton = !this.openType.singleton
				this.openType.workspace = false
				this.openType.sex = false
			}else if(v == 'sex'){
				this.openType.sex = !this.openType.sex
				this.openType.workspace = false
				this.openType.singleton = false
				
			}
			let mask = document.getElementsByClassName("habit_mask")[0]
			mask.addEventListener("click", this.documentClick,true);
		},
		documentClick(){
			let mask = document.getElementsByClassName("habit_mask")[0]
			mask.removeEventListener("click", this.documentClick);
			this.openType.habit = false
			this.openType.workspace = false
			this.openType.model = false
			this.openType.singleton = false
			this.openType.sex = false
		},
		// //选择模特
		// selectModels() {
		// 	let modelsModal: any = this.$refs.modelsModal;
		// 	modelsModal.init();
		// },

		// //确定选择模特
		// sureSelectModel(event: any) {
		// 	this.store.commit("setTemplateData", event);
		// },
    },
});
</script>
<style lang="less" scoped>
.habit {
    position: relative;
    .habit_button {
		background-color: #fff;
        border: solid 2px #000;
        padding: 0px calc(2rem*1.2);
        box-sizing: initial;
        font-weight: 600;
        height: calc(3.2rem*1.2);
        line-height: calc(3.2rem*1.2);
        padding: calc(.4rem*1.2) calc(1.5rem*1.2);
        font-size: calc(1.2rem*1.2);
		cursor: pointer;
		position: relative;
        .fi-bs-angle-down {
            margin-left: calc(1rem*1.2);
            display: inline-block;
            transform: translateY(2px);
        }
    }
	.habit_mask{
		position: absolute;
		top: -20px;
		left: auto;
		right: -30px;
		bottom: 0;
		// background: #000;
		opacity: 0;
		width: 100vw;
		height: 100vh;
	}
    .habit_content {
        border: solid 2px #000;
        border-radius: calc(1rem*1.2);
        padding: calc(2rem*1.2);
		// zoom: .75;
		font-size: calc(1.6rem*1.2);
        transform-origin: top right;
        position: absolute;
        right: calc(-.3rem*1.2);
        top: 110%;
        background: #fff;
        // width: 25rem*1.2);
		width: calc(30rem*1.2);
		opacity: 0;
		transition: all .3s;
        transform: scale(0.75)translateY(10%);
		display: none;
		overflow: inherit !important;
		&.active{
			opacity: 1;
			transform: scale(0.75)translateY(0%);
		}
        .habit_title {
            h3 {
                font-size: calc(1.6rem*1.2);
                font-weight: 600;
                color: #000;
                margin: 0;
            }
            .habit_intro {
                font-size: calc(1.2rem*1.2);
                color: rgba(0, 0, 0, 0.5);
                font-weight: 500;
            }
        }
        .habit_type {
            margin-top: calc(1.5rem*1.2);
			cursor: pointer;
			position: relative;
			.habit_workspace_show{
				width: 100%;
				z-index: 1;
				transform: translateY(10%);
				top: calc(4rem*1.2);
				height: calc(14rem*1.2);
				overflow-x: hidden;
				cursor: auto;
				&.active{
					transform: translateY(0%);
				}
			}
        }
        .habit_Overal_Single {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: calc(3rem*1.2) 0;
			position: relative;
            .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;
                }
                
            }
            :deep(.ant-switch) {
                margin: 0 calc(1rem*1.2);
            }
			.habit_sex_show{
				width: 100%;
				z-index: 1;
				transform: translateY(10%);
				top: calc(4rem*1.2);
				height: calc(14rem*1.2);
				overflow-x: hidden;
				cursor: auto;
				&.active{
					transform: translateY(0%);
				}
			}
        }
        .habit_habit_singleton {
            margin-bottom: calc(3rem*1.2);
			position: relative;
			.habit_singleton_show{
				width: 100%;
				z-index: 1;
				transform: translateY(10%);
				top: calc(4rem*1.2);
				height: calc(14rem*1.2);
				overflow-x: hidden;
				cursor: auto;
				&.active{
					transform: translateY(0%);
				}
			}
			
        }
        .habit_System_Designer {
			margin-top: calc(8rem*1.2);
            :deep(.ant-slider-track),
            :deep(.ant-slider-rail) {
                height: calc(.6rem*1.2);
                background-color: #e1e1e1;
                border-radius: calc(0.5rem*1.2);
            }
            :deep(.ant-slider .ant-slider-handle:not(.ant-tooltip-open)),
            :deep(.ant-slider-handle) {
                background-color: #2d2e76 !important;
                border: none !important;
            }
            :deep(.ant-slider-handle:hover) {
                box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
            }
           
            .habit_System_Designer_text_max {
                display: flex;
                justify-content: space-between;
                .habit_System_Designer_text {
                }
            }
        }
		.habit_model{
			margin-top: calc(2rem*1.2);
		}
		
		.habit_model_show{
			position: absolute;
			background-color: #fff;
			border: solid 2px #000;
			border-radius: calc(1rem*1.2);
			padding: calc(2rem*1.2);
			bottom: calc(-.5rem*1.2);
			transform: translateY(110%);
			right: calc(-.2rem*1.2);
			width: calc(40rem*1.2);
			// width: 35rem*1.2);
			opacity: 0;
			transition: all .3s;
			display: none;
			&.active{
				opacity: 1;
				transform: translateY(100%);
			}
			.habit_btn{
				min-height: calc(26rem*1.2);
				display: flex;
				justify-content: space-between;
				.model_current{
					margin-right: calc(3rem*1.2);
					.model_text{
						text-align: center;
					}
				}
			}
			.habit_model_list{
				margin: 0;
				li{
					padding: calc(.5rem*1.2) 0;
					display: flex;
					input{
						border: 0;
						width: 80%;
						background: rgba(0,0,0,0);
					}
					>div{
						cursor: pointer;
						width: 80%;
						white-space: nowrap;
						text-overflow:ellipsis;
						overflow:hidden;
					}
					&.newWorkspace{
						text-align: center;
						justify-content: center;

						div{
							border-radius: 50%;
							border: 1px solid #000;
							display: inline-block;
							width: calc(2rem*1.2);
							height: calc(2rem*1.2);
							line-height: calc(2rem*1.2);
							text-align: center;
						}
						i{
							flex: 1;
						}
					}
					i{
						cursor: pointer;
					}
					.fi-rr-trash{
						margin-left: calc(1rem*1.2);
					}
				}
				li:hover{
					background: rgba(0, 0, 0, 0.1);
				}
				.material_content_list_loding{
					width: 100%;
					height: calc(4rem*1.2);
					display: flex;
					img{
						width: auto;
						margin: 0 auto;
						height: 100%;
					}
				}

			}
			.model_Designer{
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.model_text{
					display: flex;
					justify-content: center;
					:deep(.ant-switch) {
						margin: 0 calc(1rem*1.2);
					}
					.habit_System_Seleves_text {
						font-weight: 600;
						color: rgba(0, 0, 0, 0.5);
						&.active {
							color: rgba(0, 0, 0, 0.7);
							font-weight: 900;
						}
						:deep(.ant-switch-checked) {
							background-color: #000;
						}
					}
				}
			}
			.model_img{
				display: flex;
				flex: 1;
				align-items: center;
				overflow-x: auto;
				&.model_img::-webkit-scrollbar {
					/* 竖轴的宽度 */
					width: calc(1rem*1.2);
					/* 横轴的高度 */
					height: calc(1rem*1.2);
					transition: all .3s;
				}
				/* 进度 */
				&.model_img::-webkit-scrollbar-thumb {
					border-radius: calc(1rem*1.2);
					background: rgba(238, 238, 244, 0);
				}
				/* 轨道 */
				&.model_img::-webkit-scrollbar-track {
					border-radius: calc(1rem*1.2);
					background: rgba(238, 238, 244, 0);
				}
				&.model_img:hover {
					// overflow-x: scroll;
					&.model_img::-webkit-scrollbar-thumb {
						background: #543087;
					}
					/* 轨道 */
					&.model_img::-webkit-scrollbar-track {
						background: rgba(84, 48, 135,.2);
					}
				}
				>div{
					display: flex;
					
				}
				div{
					width: auto;
					margin-right: calc(1rem*1.2);
				}
				img{
					width: calc(10rem*1.2);
					cursor: pointer;
				}
			}
		}
		
    }
}
.habit :deep(.ant-dropdown-button) {
    margin-right: 8px;
    margin-bottom: 8px;
}
.habit :deep(.ant-btn) {
    box-shadow: none !important;
    color: rgba(0, 0, 0, 0.5);
    box-shadow: none;
    border: none;
    background: #f6f6f6;
    width: 100%;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
	font-size: calc(1.4rem*1.2);
}
</style>
<style>
.ant-tooltip{
	z-index: 1049 !important;
}
.habit :deep(.ant-tooltip .ant-tooltip-inner) ,:deep(.ant-tooltip-arrow-content){
	background: #000 !important;
}
.habit_mod{
	background-color: #000 !important;
	/* top: 0 !important; */
	/* left: 0 !important; */
}
.ant-tooltip .ant-tooltip-inner ,.ant-tooltip-arrow-content{
	background: #000 !important;
}
</style>