first commit
first commit
This commit is contained in:
zhouchengrong
433
src/component/Detail/habit.vue
Normal file
433
src/component/Detail/habit.vue
Normal file
@@ -0,0 +1,433 @@
|
||||
<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">
|
||||
<a-dropdown>
|
||||
<template #overlay>
|
||||
<a-menu @click="habitTypeclick">
|
||||
<a-menu-item aaa="22" key="1st menu item"> 1st menu item </a-menu-item>
|
||||
<a-menu-item key="2nd menu item"> 2nd menu item </a-menu-item>
|
||||
<a-menu-item key="3rd item"> 3rd item </a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
<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 }"
|
||||
>
|
||||
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_Overal_Single_text"
|
||||
:class="{ active: !checked }"
|
||||
>
|
||||
System
|
||||
</div>
|
||||
<a-switch v-model:checked="checked" />
|
||||
<div
|
||||
class="habit_Overal_Single_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 type { MenuProps } from "ant-design-vue";
|
||||
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: {
|
||||
|
||||
handleButtonClick(e: Event) {
|
||||
console.log("click left button", e);
|
||||
},
|
||||
handleMenuClick(e: Event) {
|
||||
console.log("click", e);
|
||||
},
|
||||
systemDesigner(num: Number) {
|
||||
console.log(num);
|
||||
},
|
||||
formatter(value: number) {
|
||||
return `${value}%`;
|
||||
},
|
||||
habitBtn(){
|
||||
const aa = this.$refs.stringg
|
||||
// const aa = this.$refs.stringg;
|
||||
// aa.style
|
||||
console.log(aa);
|
||||
|
||||
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 20px;
|
||||
box-sizing: initial;
|
||||
font-weight: 600;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 4px 15px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.fi-bs-angle-down {
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
.habit_content {
|
||||
border: solid 2px #000;
|
||||
border-radius: 10px;
|
||||
padding: 20px 20px;
|
||||
// zoom: .75;
|
||||
transform-origin: top right;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: 110%;
|
||||
background: #fff;
|
||||
// width: 25rem;
|
||||
width: 200px;
|
||||
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: 16px;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
}
|
||||
.habit_intro {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.habit_type {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.habit_Overal_Single {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 30px 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-checked) {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
:deep(.ant-switch) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.habit_habit_singleton {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.habit_System_Designer {
|
||||
margin-top: 80px;
|
||||
:deep(.ant-slider-track),
|
||||
:deep(.ant-slider-rail) {
|
||||
height: 0.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: 20px;
|
||||
|
||||
}
|
||||
|
||||
.habit_model_show{
|
||||
position: absolute;
|
||||
border: solid 2px #000;
|
||||
border-radius: 10px;
|
||||
padding: 20px 20px;
|
||||
bottom: -5px;
|
||||
transform: translateY(110%);
|
||||
right: -2px;
|
||||
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 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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>
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user