aida_front/src/component/Detail/habit.vue

<template>
    <div class="habit">
        <div class="habit_button" @click="habitBtn" ref="stringg">
            Workspace
            <i class="fi fi-bs-angle-down"></i>
        </div>
		
        <div class="habit_content" v-fade="habit">
            <div class="habit_title">
                <h3 class="" @click="aaa()">Workspace Setting</h3>
                <div class="habit_intro">adjust your workspace setting</div>
            </div>
            <div class="habit_type" trigger="['click']">
                <a-dropdown placement="bottomRight">
                   
                    <a-button>
                        <UserOutlined />
                        {{habitType.habitTypeone}}
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
            </div>
			<div class="habit_Overal_Single">
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: !checked }"
                >
                    男
                </div>
                <a-switch v-model:checked="checked" />
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: checked }"
                >
                    女
                </div>
            </div>
            <div class="habit_Overal_Single">
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: !checked }"
                >
                    Overal
                </div>
                <a-switch v-model:checked="checked" />
                <div
                    class="habit_Overal_Single_text"
                    :class="{ active: checked }"
                >
                    Single
                </div>
            </div>
            <div class="habit_habit_singleton" v-show="checked">
                <a-dropdown >
                    <template #overlay>
                        <a-menu @click="handleMenuClick">
                            <a-menu-item key="1"> 上衣 </a-menu-item>
                            <a-menu-item key="2"> 裤子 </a-menu-item>
                        </a-menu>
                    </template>
                    <a-button>
                        <UserOutlined />
                        上衣
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
            </div>
			<div class="habit_System_Designer">
                <a-slider id="system_silder"
                    v-model:value="value"
                    @afterChange="systemDesigner"
					:tip-formatter="formatter"
				>
                </a-slider>
                <div class="habit_System_Designer_text_max">
                    <div class="habit_System_Designer_text">System</div>
                    <div class="habit_System_Designer_text">Designer</div>
                </div>
            </div>
			<div class="habit_model">
                <a-dropdown placement="bottomRight"
					trigger="['click']"
					@click="modelBtn"
					>
                    <a-button>
                        <UserOutlined />
                        Mannequin
                        <DownOutlined />
                    </a-button>
                </a-dropdown>
            </div>
			<div id="modelShow" class="habit_model_show"  v-fade="model">
				<div class="habit_btn">
					<div class="model_current">
					<div class="model_text">Current</div>
					<div class="model_img">
						<img src="" alt="">
					</div>
				</div>
				<div class="model_Designer">
					<div class="model_text">
						<div
							class="habit_System_Seleves_text"
							:class="{ active: !checked }"
						>
							System
						</div>
						<a-switch v-model:checked="checked" />
						<div
							class="habit_System_Seleves_text"
							:class="{ active: checked }"
						>
							Seleves
						</div>
					</div>
					<div class="model_img">
						<div v-for="(item,index) in checked?obj:obj2" :key="item.id">
							<img :src="item.url" alt="">
						</div>
					</div>
				</div>
				</div>
				
			</div>
        </div>
	
    </div>
</template>
<script lang="ts">
import { defineComponent, createVNode, 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 axios from "axios";
export default defineComponent({
    components: {
        DownOutlined,
        UserOutlined,
    },
	setup(){
		let checked:any= ref(true);
		let value = ref<number>(30);
		let tooltip = ref(true);
		let habit = ref(false);
		let model = ref(false);
		let habitType = ref({
			habitTypeone:"Workspace Setting",
			habitTypeList:[
				{
					id:1,
					name:"11111"
				},
				{
					id:2,
					name:"222"
				},
				{
					id:2,
					name:"333"
				},
			],
		});
		let obj= ref([
			{
				id:1,
				url:"11111"
			},
			{
				id:2,
				url:"11111"
			},
		]);
		let obj2= ref([
			{
				id:1,
				url:"22"
			},
			{
				id:2,
				url:"222"
			},
		])
		// const stringg = ref()
		const habitTypeclick : MenuProps['onClick'] = (e)=>{
			
			// this.habitType.habitTypeone = e
		}
		// const stringg:Ref<HTMLElement | null> = ref(null)
		// const aaa = ()=>{
		// 	if(stringg.value){
		// 		console.log(stringg.value.classList)
		// 	}
		// }
			
	return{
			habitTypeclick,
			checked,
			value,
			tooltip,
			habit,
			model,
			habitType,
			obj,
			obj2,
		}
    },
    data() {

        return {
        };
    },
    mounted() {
	},
	directives:{
		fade:{
			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);
				}
			}
		}
	},
    methods: {
		getworkspace(){
			Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:3}}).then((rv: any) => {
				if (rv) {
					console.log(rv,'workspace');
				}
			})
					
		},
        handleButtonClick(e: Event) {

            console.log("click left button", e);
        },
        handleMenuClick(e: Event) {
            console.log("click", e);
		this.getworkspace()

        },
        systemDesigner(num: Number) {
            console.log(num);
        },
		formatter(value: number) {
			return `${value}%`;
		},
		habitBtn(){
			const aa = this.$refs.stringg
			// const aa = this.$refs.stringg;
			// aa.style
			
			this.habit = !this.habit
			if(!this.habit){
				this.model = false
			}
		},
		modelBtn(){
			this.model = !this.model
		},
    },
});
</script>
<style lang="less" scoped>
.habit {
    position: relative;
    .habit_button {
		background-color: #fff;
        border: solid 2px #000;
        padding: 0px 2rem;
        box-sizing: initial;
        font-weight: 600;
        height: 3.2rem;
        line-height: 3.2rem;
        padding: .4rem 1.5rem;
        font-size: 1.2rem;
		cursor: pointer;
        .fi-bs-angle-down {
            margin-left: 1rem;
            display: inline-block;
            transform: translateY(2px);
        }
    }
    .habit_content {
        border: solid 2px #000;
        border-radius: 1rem;
        padding: 2rem;
		// zoom: .75;
        transform-origin: top right;
        position: absolute;
        right: -.3rem;
        top: 110%;
        background: #fff;
        // width: 25rem;
		width: 30rem;
		opacity: 0;
		transition: all .3s;
        transform: scale(0.75)translateY(10%);
		display: none;
		&.active{
			opacity: 1;
			transform: scale(0.75)translateY(0%);
		}
        .habit_title {
            h3 {
                font-size: 1.6rem;
                font-weight: 600;
                color: #000;
                margin: 0;
            }
            .habit_intro {
                font-size: 1.2rem;
                color: rgba(0, 0, 0, 0.5);
                font-weight: 500;
            }
        }
        .habit_type {
            margin-top: 1.5rem;
			// cursor: pointer;
			button{
				cursor: auto;
			}
			button:hover{
				color: rgba(0, 0, 0, 0.5);
			}
        }
        .habit_Overal_Single {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 3rem 0;
            .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 1rem;
            }
        }
        .habit_habit_singleton {
            margin-bottom: 3rem;
        }
        .habit_System_Designer {
			margin-top: 8rem;
            :deep(.ant-slider-track),
            :deep(.ant-slider-rail) {
                height: .6rem;
                background-color: #e1e1e1;
                border-radius: 0.5rem;
            }
            :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: 2rem;
			
		}
		
		.habit_model_show{
			position: absolute;
			background-color: #fff;
			border: solid 2px #000;
			border-radius: 1rem;
			padding: 2rem;
			bottom: -.5rem;
			transform: translateY(110%);
			right: -.2rem;
			width: 35rem;
			opacity: 0;
			transition: all .3s;
			display: none;
			&.active{
				opacity: 1;
				transform: translateY(100%);
			}
			.habit_btn{
				display: flex;
				justify-content: space-between;
			}
			.model_Designer{
				.model_text{
					display: flex;
					:deep(.ant-switch) {
						margin: 0 1rem;
					}
					.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;
			}
		}
		
    }
}
.habit :deep(.ant-dropdown-button) {
    margin-right: 8px;
    margin-bottom: 8px;
}
.habit :deep(.ant-btn:hover),
:deep(.ant-btn:focus),
:deep(.ant-btn:active),
:deep(.ant-btn::after) {
    color: #000;
    border-color: #000 !important;
    box-shadow: none !important;
}
:deep(.ant-switch-checked) {
	background-color: #000;
}
.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;
}
</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>