fix
This commit is contained in:
X1627315083
225
src/component/Detail/habitSetStyle.vue
Normal file
225
src/component/Detail/habitSetStyle.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<a-modal
|
||||
class="habitSetStyle_modal generalModel"
|
||||
v-model:visible="habitSetStyle"
|
||||
:footer="null"
|
||||
width="50%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="habitSetStyleMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="habitSetStyle_content" v-hoverAnmi>
|
||||
<div class="modal_title_text">
|
||||
<div>Style</div>
|
||||
<div class="modal_title_text_intro"></div>
|
||||
</div>
|
||||
<div class="habitSetStyle_content_bottom">
|
||||
<div class="content_bottom_item" v-for="item in styleList">
|
||||
<div class="content_bottom_item_border" :class="{active:item.id == selectStyleId}" @click="setItemSelect(item)">
|
||||
{{ item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="habitSetStyle_ok started_btn" @click="setOk">
|
||||
OK
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
|
||||
// import { getCookie } from "@/tool/cookie";
|
||||
import { Https } from "@/tool/https";
|
||||
import { getCookie,setCookie } from "@/tool/cookie";
|
||||
// import domTurnImg from '@/tool/domTurnImg'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { downloadIamge } from "@/tool/util";
|
||||
|
||||
export default defineComponent({
|
||||
emits:['setParentData','setWorkspaceStyle'],
|
||||
|
||||
setup(props,{emit}) {
|
||||
let habitSetStyle: any = ref(false);//弹窗
|
||||
let habitSetStyleMask:any = ref(false)//弹窗遮罩
|
||||
let habitSetStyleData:any = reactive({
|
||||
styleList:[],
|
||||
selectStyleId:'',
|
||||
isShowMark:false,
|
||||
})
|
||||
let getStyleList = ()=>{
|
||||
habitSetStyleData.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
|
||||
(rv) => {
|
||||
habitSetStyleData.isShowMark = false
|
||||
rv.forEach((item:any) => {
|
||||
let name = item.value
|
||||
item.value = item.name
|
||||
item.name = name
|
||||
});
|
||||
habitSetStyleData.styleList = rv
|
||||
}
|
||||
).catch(res=>{
|
||||
habitSetStyleData.isShowMark = false
|
||||
});
|
||||
}
|
||||
let init = ()=>{
|
||||
habitSetStyle.value = true
|
||||
if(habitSetStyleData.styleList.length == 0){
|
||||
getStyleList()
|
||||
}
|
||||
// habitSetStyleData.selectStyleId = 'feng2'
|
||||
}
|
||||
let setCover = (item:any)=>{
|
||||
habitSetStyleData.subPublishDate.coverId = item.designOutfitId
|
||||
habitSetStyleData.selectDate.url = item.url
|
||||
|
||||
}
|
||||
let cleardata = ()=>{
|
||||
habitSetStyle.value = false
|
||||
habitSetStyleData.isShowMark = false
|
||||
setParentData()
|
||||
|
||||
}
|
||||
let setParentData = ()=>{
|
||||
emit('setParentData')
|
||||
}
|
||||
|
||||
let cancelDsign = ()=>{
|
||||
cleardata()
|
||||
}
|
||||
let setOk= ()=>{
|
||||
emit('setWorkspaceStyle',habitSetStyleData.selectStyleId)
|
||||
cleardata()
|
||||
}
|
||||
let setItemSelect = (item:any)=>{
|
||||
habitSetStyleData.selectStyleId = item.id
|
||||
}
|
||||
return {
|
||||
habitSetStyle,
|
||||
habitSetStyleMask,
|
||||
...toRefs(habitSetStyleData),
|
||||
init,
|
||||
setCover,
|
||||
cancelDsign,
|
||||
setItemSelect,
|
||||
setOk,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// moodTemplateId: "", //模板id
|
||||
|
||||
};
|
||||
},
|
||||
directives:{
|
||||
hoverAnmi:{
|
||||
updated (el) {
|
||||
var elements = document.querySelectorAll(".habitSetStyle_modal .content_bottom_item");
|
||||
el.addEventListener("mousemove", function (event:any) {
|
||||
// 获取鼠标位置
|
||||
var mouseX = event.pageX;
|
||||
var mouseY = event.pageY;
|
||||
|
||||
// 遍历元素并输出距离鼠标的坐标
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var element:any = elements[i];
|
||||
var rect = element.getBoundingClientRect();
|
||||
var elementX = rect.left + window.pageXOffset;
|
||||
var elementY = rect.top + window.pageYOffset;
|
||||
|
||||
var distanceX = mouseX - elementX;
|
||||
var distanceY = mouseY - elementY;
|
||||
|
||||
// 将距离值设置到每一个卡片元素上面
|
||||
element.style.setProperty('--x', distanceX + 'px');
|
||||
element.style.setProperty('--y', distanceY + 'px');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.habitSetStyle_modal {
|
||||
.habitSetStyle_content{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.habitSetStyle_content_bottom{
|
||||
--border-color: #c4c4c4;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
.content_bottom_item{
|
||||
width: calc((100% / 4) - (.8 * 1rem));
|
||||
// width: calc(100% / 4);
|
||||
// padding: 0 1rem;
|
||||
border-radius: 2rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
height: 10rem;
|
||||
background: #f3f3f3;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.content_bottom_item_border {
|
||||
position: absolute;
|
||||
inset: .2rem;
|
||||
background: #f3f3f3;
|
||||
border-radius: 2rem;
|
||||
color: #595959;
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.content_bottom_item:nth-child(4n){
|
||||
margin-right: 0rem;
|
||||
}
|
||||
.content_bottom_item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% + .2rem);
|
||||
height: calc(100% + .2rem);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-radius: 2rem;
|
||||
transform: translate(-50%, -50%);
|
||||
background: radial-gradient(50px circle at var(--x) var(--y),#39215b 0,transparent 100%);;
|
||||
}
|
||||
.content_bottom_item .active{
|
||||
background: #39215b;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.habitSetStyle_ok{
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user