fix
This commit is contained in:
X1627315083
@@ -7,73 +7,8 @@ const router = createRouter({
|
||||
path: '/',
|
||||
redirect: "/activities",
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue')
|
||||
},{
|
||||
path: '/activities',
|
||||
name: 'Activities',
|
||||
component: () => import('../views/Activities/index.vue'),
|
||||
children: [
|
||||
// {
|
||||
// path: '',
|
||||
// name: 'activitiesWorkshop',
|
||||
// redirect: "/activities/workshop",
|
||||
// },
|
||||
{
|
||||
path: "workshop",
|
||||
name: "Workshop",
|
||||
component: () => import('../views/Activities/workshop/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'adtivitiesWorkshopLogin',
|
||||
redirect: "/activities/workshop/login",
|
||||
},{
|
||||
path: "login",
|
||||
name: "login",
|
||||
component: () => import('../views/Activities/workshop/views/login.vue'),
|
||||
},{
|
||||
path: "edit",
|
||||
name: "edit",
|
||||
component: () => import('../views/Activities/workshop/views/edit.vue'),
|
||||
},{
|
||||
path: "success",
|
||||
name: "success",
|
||||
component: () => import('../views/Activities/workshop/views/success.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "workshop2",
|
||||
name: "Workshop2",
|
||||
component: () => import('../views/Activities/workshop2/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'adtivitiesWorkshop2Login',
|
||||
redirect: "/activities/workshop2/login",
|
||||
},{
|
||||
path: "login",
|
||||
name: "login2",
|
||||
component: () => import('../views/Activities/workshop2/views/login.vue'),
|
||||
},{
|
||||
path: "edit",
|
||||
name: "edit2",
|
||||
component: () => import('../views/Activities/workshop2/views/edit.vue'),
|
||||
},{
|
||||
path: "success",
|
||||
name: "success2",
|
||||
component: () => import('../views/Activities/workshop2/views/success.vue'),
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +0,0 @@
|
||||
<!-- <script setup lang="ts">
|
||||
|
||||
</script> -->
|
||||
<template>
|
||||
<div class="activities">
|
||||
<RouterView />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.activities {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: poppinsMedium;
|
||||
}
|
||||
// @media (min-width: 1024px) {
|
||||
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -1,169 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import {getCalculateReport} from '@/api/workshop'
|
||||
|
||||
const props = defineProps({
|
||||
isSummaryReport:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
calculateReport:{
|
||||
type:Object,
|
||||
default:()=>{},
|
||||
},
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:isSummaryReport'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
const goBack = ()=>{
|
||||
emit('update:isSummaryReport',false)
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="summaryReport">
|
||||
<div class="header">
|
||||
Swipe Style
|
||||
<img @click="goBack" src="@/assets/images/workshop/back.svg" alt="">
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="text">
|
||||
<div class="title">Summary Report!</div>
|
||||
<div class="progress">Current progress: {{ calculateReport?.count }}/{{ calculateReport?.count + calculateReport?.answeringCount }} people</div>
|
||||
<!-- <div class="info">Based on the choice of the majority, system<br /> detected the most popular trends for you: <span>XXX</span>.</div> -->
|
||||
</div>
|
||||
<div class="popularChoices swiper">
|
||||
<div class="title">Popular Choices</div>
|
||||
<div class="imgBox">
|
||||
<div class="imgList">
|
||||
<div class="item" v-for="item in calculateReport?.mostLikeOutfits">
|
||||
<img :src="item?.outfitImagePath" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="text middle">
|
||||
<div class="info">System detected the most unpopular trends for you: <br /> <span>XXX/XXX/XXX</span>.</div>
|
||||
</div> -->
|
||||
<div class="unpopularChoices swiper">
|
||||
<div class="title">Unpopular Choices</div>
|
||||
<div class="imgBox">
|
||||
<div class="imgList">
|
||||
<div class="item" v-for="item in calculateReport?.leastLikeOutfits">
|
||||
<img :src="item?.outfitImagePath" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.summaryReport{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .header{
|
||||
padding: .9rem 0;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
font-family: poppinsBold;
|
||||
> img{
|
||||
position: absolute;
|
||||
left: 3rem;
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
> .body{
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
> .text{
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
> .progress{
|
||||
font-size: 1rem;
|
||||
color: #cdcdcd;
|
||||
font-weight: 500;
|
||||
}
|
||||
> .title{
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
color: #4D52C3;
|
||||
}
|
||||
> .info{
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
color: #000;
|
||||
margin-top: 1.2rem;
|
||||
> span{
|
||||
font-weight: 600;
|
||||
color: #4d52c3;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .swiper{
|
||||
width: calc(100% - 3.2rem * 2);
|
||||
margin: 0 auto;
|
||||
margin-top: 2.4rem;
|
||||
> .title{
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
// margin-bottom: 1.2rem;
|
||||
}
|
||||
> .imgBox{
|
||||
margin-top: 1.6rem;
|
||||
> .imgList{
|
||||
width: auto;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
> .item{
|
||||
shrink: 0;
|
||||
padding-bottom: 1.2rem;
|
||||
padding-right: 1.2rem;
|
||||
> img{
|
||||
// margin-right: 1.2rem;
|
||||
|
||||
width: 12.8rem;
|
||||
height: 19.2rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: .7rem .4rem 1rem 0rem rgba(0,0,0,.2);
|
||||
object-fit: contain;
|
||||
&:last-child{
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .popularChoices{
|
||||
> .imgBox{
|
||||
> .imgList{
|
||||
padding-bottom: calc(5.2rem - 2.4rem);
|
||||
}
|
||||
> .imgList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .unpopularChoices{
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -1,90 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import {getQueryPage} from '@/api/workshop'
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
import { useRouter,useRoute, onBeforeRouteLeave } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const store = useWorkshopStore()
|
||||
let dataDom = reactive({
|
||||
loadingDom:null as any,
|
||||
})
|
||||
let data = reactive({
|
||||
|
||||
})
|
||||
const handleBeforeUnload = (e:any) => {
|
||||
if (window.location.pathname === '/activities/workshop/success') {
|
||||
localStorage.setItem('shouldRedirectAfterRefresh', 'true');
|
||||
// e.preventDefault();
|
||||
// e.returnValue = '刷新后将跳转到登录页';
|
||||
}
|
||||
|
||||
};
|
||||
onBeforeRouteLeave((to, from, next) => {
|
||||
if (confirm('自定义提示：确定离开当前页面吗？')) {
|
||||
next();
|
||||
} else {
|
||||
next(false);
|
||||
}
|
||||
});
|
||||
onMounted(()=>{
|
||||
getQueryPage({page:1,size:200}).then((rv:any)=>{
|
||||
store.setQueryList(rv.content)
|
||||
})
|
||||
setTimeout(()=>{
|
||||
dataDom.loadingDom.style.opacity = '0';
|
||||
setTimeout(()=>{
|
||||
dataDom.loadingDom.style.display = 'none';
|
||||
},1000)
|
||||
},3000)
|
||||
|
||||
if (localStorage.getItem('shouldRedirectAfterRefresh') === 'true') {
|
||||
localStorage.removeItem('shouldRedirectAfterRefresh'); // 清除标记
|
||||
router.push('/activities/workshop/login'); // 跳转
|
||||
}
|
||||
window.addEventListener('pagehide', handleBeforeUnload)
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
window.removeEventListener('pagehide', handleBeforeUnload)
|
||||
})
|
||||
|
||||
const { loadingDom } = toRefs(dataDom);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshop">
|
||||
<div class="loading" ref="loadingDom">
|
||||
<img src="@/assets/images/workshop/loadingPage.png" alt="">
|
||||
</div>
|
||||
<RouterView />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workshop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
> .loading{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
transition: all 1s;
|
||||
background: #fff;
|
||||
img{
|
||||
width: 25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,332 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, computed, watch } from "vue";
|
||||
import { getMousePosition } from '@/utils/tools'
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
import {userSave} from '@/api/workshop'
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
const store = useWorkshopStore()
|
||||
const router = useRouter()
|
||||
|
||||
let data = reactive({
|
||||
imgEvent:{} as any,
|
||||
tlRight:gsap.timeline({ paused: true }),
|
||||
tlLeft:gsap.timeline({ paused: true }),
|
||||
editList:[
|
||||
{
|
||||
id:1,
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
},
|
||||
],
|
||||
selectIndex:0 as any,
|
||||
maskShow:false,
|
||||
dressStyle:{},
|
||||
})
|
||||
let queryList = computed(()=>store.queryList) as any
|
||||
|
||||
let imgDom = ref()
|
||||
let editDom = ref()
|
||||
let noLikeDom = ref()
|
||||
let likeDom = ref()
|
||||
let maskDom = ref()
|
||||
const next = (moveSize:any)=>{
|
||||
editDom.value.style.transition = 'all .3s'
|
||||
editDom.value.style.opacity = '0'
|
||||
if(moveSize > 0){
|
||||
queryList.value[data.selectIndex].count = false
|
||||
}else{
|
||||
queryList.value[data.selectIndex].count = true
|
||||
}
|
||||
|
||||
setTimeout(()=>{
|
||||
data.selectIndex++
|
||||
editDom.value.style.transition = ''
|
||||
editDom.value.style.opacity = '1'
|
||||
data.tlLeft.progress(0)
|
||||
data.tlRight.progress(0)
|
||||
},300)
|
||||
|
||||
}
|
||||
const setLikeOrOnLike = (event:any)=>{
|
||||
imgDom.value.style.transition = ''
|
||||
data.imgEvent = event
|
||||
|
||||
// document.addEventListener('mousemove', sizeMouseMove);
|
||||
document.addEventListener('touchmove', sizeTouchmove);
|
||||
// document.addEventListener('mouseup', sizeMouseup);
|
||||
document.addEventListener('touchend', sizeMouseup);
|
||||
}
|
||||
const sizeTouchmove = (event:any)=>{
|
||||
let e:any = getMousePosition(event,true)
|
||||
let moveSize = data.imgEvent.screenX - e?.screenX
|
||||
let domWidth = e?.target.parentNode.parentNode.offsetWidth
|
||||
if(moveSize > 0){
|
||||
data.tlLeft.progress(Math.abs(moveSize) / domWidth)
|
||||
}else{
|
||||
data.tlRight.progress(Math.abs(moveSize) / domWidth)
|
||||
}
|
||||
}
|
||||
const sizeMouseup = (event:any)=>{
|
||||
let e:any = getMousePosition(event,true)
|
||||
let moveSize = data.imgEvent.screenX - e?.screenX
|
||||
let domWidth = e?.target.parentNode.parentNode.offsetWidth
|
||||
let moveScale = Math.abs(moveSize) / domWidth
|
||||
if(moveScale > .4){
|
||||
next(moveSize)
|
||||
// emit('setLikeOrOnLike',moveSize > 0?'onLike':'like')
|
||||
}else{
|
||||
imgDom.value.style.transition = 'all .3s'
|
||||
data.tlLeft.progress(0)
|
||||
data.tlRight.progress(0)
|
||||
}
|
||||
// document.removeEventListener('mousemove',this.sizeMouseMove)
|
||||
document.removeEventListener('touchmove',sizeTouchmove)
|
||||
// document.removeEventListener('mouseup',this.sizeMouseup)
|
||||
document.removeEventListener('touchend',sizeMouseup)
|
||||
}
|
||||
const openMask = ()=>{
|
||||
let imgDomStyle = imgDom.value.getBoundingClientRect()
|
||||
data.dressStyle = {
|
||||
top:imgDomStyle.top + 'px',
|
||||
left:imgDomStyle.left + 'px',
|
||||
width:imgDomStyle.width + 'px',
|
||||
height:imgDomStyle.height + 'px',
|
||||
}
|
||||
maskDom.value.style.opacity = '1'
|
||||
maskDom.value.style.display = 'block'
|
||||
document.addEventListener('touchend', touchendUp);
|
||||
}
|
||||
const touchendUp = ()=>{
|
||||
maskDom.value.style.opacity = '0'
|
||||
setTimeout(()=>{
|
||||
maskDom.value.style.display = 'none'
|
||||
}, 300)
|
||||
document.removeEventListener('touchend',touchendUp)
|
||||
}
|
||||
watch(()=>data.selectIndex,(newVal,oldVal)=>{
|
||||
console.log(newVal)
|
||||
let value = {
|
||||
userId:store.userData.id,
|
||||
questionNum:queryList.value[oldVal].id,
|
||||
isLike:queryList.value[oldVal].count,
|
||||
}
|
||||
userSave(value)
|
||||
if(newVal == 30){
|
||||
router.push({
|
||||
path:'/activities/workshop/success',
|
||||
})
|
||||
}
|
||||
})
|
||||
const cliSetNext = (num:number)=>{
|
||||
imgDom.value.style.transition = 'all .3s'
|
||||
if(num > 0){
|
||||
data.tlLeft.progress(1)
|
||||
}else{
|
||||
data.tlRight.progress(1)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
imgDom.value.style.transition = 'all .0s'
|
||||
next(num)
|
||||
},300)
|
||||
}
|
||||
onMounted(()=>{
|
||||
data.tlRight.to(imgDom.value, { rotation: 20, duration: 1 }, 0) // 第 0 秒开始
|
||||
.to(likeDom.value, { scale:1.3, duration: 1 }, '-=1')
|
||||
data.tlLeft.to(imgDom.value, { rotation: -20, duration: 1 }, 0) // 第 0 秒开始
|
||||
.to(noLikeDom.value, { scale:1.3, duration: 1 }, '-=1')
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const { selectIndex, maskShow, dressStyle } = toRefs(data)
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshopEdit">
|
||||
<div class="header">
|
||||
Swipe Style
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="header">
|
||||
<div class="profile">
|
||||
<img src="@/assets/images/workshop/editProfile.png" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="info">{{ store.userData.title }}</div>
|
||||
<div class="info">{{ store.userData.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/workshop/editHanger.png" alt="">
|
||||
</div>
|
||||
<div class="text">{{ selectIndex + 1 }}/{{queryList.length}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit" ref="editDom">
|
||||
<img
|
||||
ref="imgDom"
|
||||
@mousedown.stop="setLikeOrOnLike(getMousePosition($event,false))"
|
||||
@touchstart.passive="setLikeOrOnLike(getMousePosition($event,true))"
|
||||
:src="queryList?.[selectIndex]?.itemImagePath" alt="">
|
||||
<div class="btnBox">
|
||||
<div class="likeOrNoLike">
|
||||
<img ref="noLikeDom" @click="cliSetNext(1)" src="@/assets/images/workshop/editNoLike.png" alt="">
|
||||
<img ref="likeDom" @click="cliSetNext(-1)" class="likeDom" src="@/assets/images/workshop/editLike.png" alt="">
|
||||
</div>
|
||||
<div class="tryOn" @touchstart.passive="openMask"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mask" ref="maskDom">
|
||||
<img :style="dressStyle" :src="queryList?.[selectIndex]?.outfitImagePath" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workshopEdit {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
touch-action: none; /* 完全禁用浏览器默认触摸行为 */
|
||||
> .header{
|
||||
margin-top: .9rem;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
font-family: poppinsSemiBold;
|
||||
}
|
||||
> .user{
|
||||
margin-top: 1.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
> .header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .profile{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .8rem;
|
||||
> img{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
> .info{
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .progress{
|
||||
border: 1px solid #cbcdf1;
|
||||
width: 7.2rem;
|
||||
height: 2.4rem;
|
||||
background: #f6f7ff;
|
||||
border-radius: 1rem;
|
||||
color: #4d52c3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> .icon{
|
||||
margin-right: .1rem;
|
||||
> img{
|
||||
transform: translateY(.2rem);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .edit{
|
||||
padding: 0 3rem;
|
||||
margin-top: 1.7rem;
|
||||
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
padding-bottom: 5rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
flex: 1;
|
||||
object-fit: contain;
|
||||
// height: 50rem;
|
||||
border-radius: 1.2rem;
|
||||
box-shadow: .7rem .4rem 1rem -0rem rgba(0,0,0,.2);
|
||||
transform-origin: center bottom;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .btnBox{
|
||||
margin-top: 4.7rem;
|
||||
padding: 0 1.1rem;
|
||||
width: 100%;
|
||||
> .likeOrNoLike{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> img{
|
||||
width: 6.6rem;
|
||||
height: 6.6rem
|
||||
}
|
||||
}
|
||||
> .tryOn{
|
||||
background:
|
||||
url('@/assets/images/workshop/editOpenGroup.png')
|
||||
center/contain /* 位置/尺寸 */
|
||||
no-repeat /* 不重复 */
|
||||
fixed; /* 背景色 */
|
||||
width: 7.4rem;
|
||||
height: 7.4rem;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .mask{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(255,255,255,.5);
|
||||
transition: all .3s;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
img{
|
||||
position: fixed;
|
||||
border-radius: 1.2rem;
|
||||
box-shadow: .7rem .4rem 1rem -0rem rgba(0,0,0,.2);
|
||||
object-fit: contain;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,178 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
import {userCreate} from '@/api/workshop'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useWorkshopStore()
|
||||
const props = defineProps({
|
||||
})
|
||||
const emit = defineEmits([
|
||||
]);
|
||||
let data = reactive({
|
||||
describe:'',
|
||||
title:'',
|
||||
name:'',
|
||||
})
|
||||
const goEditWorkshop = ()=>{
|
||||
if(!data.title){
|
||||
return ElMessage({
|
||||
message: 'Please enter the title.',
|
||||
type: 'primary' as any,
|
||||
})
|
||||
}
|
||||
if(!data.name){
|
||||
return ElMessage({
|
||||
message: 'Please enter your name.',
|
||||
type: 'primary' as any,
|
||||
})
|
||||
}
|
||||
let value = {
|
||||
title:data.title,
|
||||
name:data.name,
|
||||
description:data.describe,
|
||||
}
|
||||
userCreate(value).then((rv:any)=>{
|
||||
store.setLogin({title:data.title,name:data.name,describe:data.describe,id:rv.id})
|
||||
router.push('/activities/workshop/edit')
|
||||
})
|
||||
}
|
||||
const textareaChange = (e:any)=>{
|
||||
if(e.target.value.length <= 1000){
|
||||
data.describe = e.target.value
|
||||
}else{
|
||||
e.target.value = data.describe
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
console.log(useWorkshopStore())
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const { describe, title, name } = toRefs(data);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshopLogin">
|
||||
<div class="title">
|
||||
<p>Swipe Style</p>
|
||||
<img src="@/assets/images/workshop/loginTitleImg.png" alt="">
|
||||
</div>
|
||||
<div class="userInput">
|
||||
<label>
|
||||
<span>Job Title</span>
|
||||
<input type="text" v-model="title" placeholder="Your job title">
|
||||
</label>
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<input type="text" v-model="name" placeholder="Your name">
|
||||
</label>
|
||||
<label>
|
||||
<span>Describe your favourite style in one sentence...</span>
|
||||
<div class="textarea">
|
||||
<textarea placeholder="Describe..." @input="textareaChange"></textarea>
|
||||
</div>
|
||||
<div class="textareaNum">{{ describe.length }}/300</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="enter" @click="goEditWorkshop">Enter</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workshopLogin {
|
||||
.title{
|
||||
padding-top: 3.3rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 4rem;
|
||||
color: #4D52C3;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
width: 31.3rem;
|
||||
> p{
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
font-family: poppinsBold;
|
||||
}
|
||||
> img{
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-left: 11rem;
|
||||
}
|
||||
}
|
||||
> .userInput{
|
||||
width: 31.3rem;
|
||||
margin: 0 auto;
|
||||
> label{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: .8rem;
|
||||
> span{
|
||||
font-size: 1.2rem;
|
||||
color: #626262;
|
||||
margin-bottom: .8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
input, textarea{
|
||||
font-size: 1.2rem;
|
||||
&:focus{
|
||||
outline: none; /* 清除默认焦点样式 */
|
||||
}
|
||||
}
|
||||
> input{
|
||||
border-radius: .87rem;
|
||||
padding: 1.7rem;
|
||||
background: #f1f4ff;
|
||||
border: 1.7px #4d52c3 solid;
|
||||
}
|
||||
> .textarea{
|
||||
background: #f1f4ff;
|
||||
border: none;
|
||||
height: 13rem;
|
||||
border-radius: .87rem;
|
||||
padding: 1.7rem;
|
||||
> textarea{
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
> .textareaNum{
|
||||
font-size: 1.2rem;
|
||||
color: #626262;
|
||||
margin-left: auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .enter{
|
||||
width: 31.3rem;
|
||||
margin: 0 auto;
|
||||
font-size: 1.74rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #4d52c3;
|
||||
border-radius: 1.3rem;
|
||||
height: 5.2rem;
|
||||
line-height: 5.2rem;
|
||||
box-shadow: 0px .8rem 1.7rem 0px #cbd6ff;
|
||||
cursor: pointer;
|
||||
font-family: poppinsSemiBold;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
import SummaryReport from '../components/summaryReport/index.vue'
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
import {getCalculateReport} from '@/api/workshop'
|
||||
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
})
|
||||
const emit = defineEmits({
|
||||
})
|
||||
const store = useWorkshopStore()
|
||||
let data = reactive({
|
||||
loadingSuccess:false,
|
||||
isSummaryReport:false,
|
||||
calculateReport:null as any,
|
||||
count:0,
|
||||
})
|
||||
let queryList = computed(()=>store.queryList) as any
|
||||
|
||||
const goSummaryReport = ()=>{
|
||||
// data.loadingSuccess = true
|
||||
if(!data.loadingSuccess)return
|
||||
data.isSummaryReport = true
|
||||
}
|
||||
let time = null as any;
|
||||
const getCalculate = ()=>{
|
||||
getCalculateReport().then((rv:any)=>{
|
||||
data.calculateReport = rv
|
||||
if(rv.count < 3){
|
||||
data.loadingSuccess = false
|
||||
}else{
|
||||
data.loadingSuccess = true
|
||||
}
|
||||
if(rv.answeringCount > 0){
|
||||
time = setTimeout(()=>{
|
||||
getCalculate()
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(()=>{
|
||||
getCalculate()
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
clearTimeout(time)
|
||||
})
|
||||
const { loadingSuccess, isSummaryReport, calculateReport } = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshopSuccess">
|
||||
<div class="loadingSuccess" v-show="!isSummaryReport">
|
||||
<div class="congratulations">
|
||||
<div class="icon">🎉</div>
|
||||
<div class="text">
|
||||
<div class="title">Congratulations!</div>
|
||||
<div class="info">You have completed all your selections!</div>
|
||||
<div class="describe">Your Result: Like: <span>{{ queryList.filter((item:any)=>item?.count).length }}</span> sets, Dislike: <span>{{ queryList.filter((item:any)=>!item.count).length }}</span> sets.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="botderBottom"></div>
|
||||
<div class="statusBox">
|
||||
<div class="title" @click="goSummaryReport">Check Report</div>
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/workshop/successGoTo.png" alt="">
|
||||
</div>
|
||||
<div class="status" @click="goSummaryReport">
|
||||
<img v-show="!loadingSuccess" src="@/assets/images/workshop/loading.png" alt="">
|
||||
<img v-show="loadingSuccess" src="@/assets/images/workshop/success.png" alt="">
|
||||
</div>
|
||||
<div class="info" v-show="!loadingSuccess">Current progress: {{calculateReport?.count}}/{{ calculateReport?.count + calculateReport?.answeringCount }} people</div>
|
||||
<div class="info" v-show="loadingSuccess">Done!</div>
|
||||
<!-- <div class="goSummaryReport" @click="goSummaryReport" v-show="loadingSuccess">
|
||||
Load More >
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="summaryReport" v-show="isSummaryReport">
|
||||
<SummaryReport v-model:isSummaryReport="isSummaryReport" :calculateReport="calculateReport" ref="summaryReport"></SummaryReport>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.workshopSuccess{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .loadingSuccess{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> .congratulations{
|
||||
margin: 0 auto;
|
||||
// margin-top: 11.7rem;
|
||||
width: 27rem;
|
||||
margin-bottom: 4rem;
|
||||
> img{
|
||||
margin: 0 auto;
|
||||
width: 15.4rem;
|
||||
height: 15.4rem;
|
||||
}
|
||||
> div{
|
||||
text-align: center;
|
||||
}
|
||||
> .icon{
|
||||
font-size: 12.8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
> .text{
|
||||
> .title{
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: #4d52c3;
|
||||
font-family: poppinsBold;
|
||||
}
|
||||
> .info{
|
||||
margin: 1.2rem 1.8rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
> .describe{
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
> span{
|
||||
color: #4D52C3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .botderBottom{
|
||||
width: 31rem;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
margin: 0 auto;
|
||||
}
|
||||
> .statusBox{
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .title{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
color: #4d52c3;
|
||||
font-family: poppinsBold;
|
||||
}
|
||||
> .status{
|
||||
margin-top: 1rem;
|
||||
> img{
|
||||
width: 9rem;
|
||||
height: 9rem
|
||||
}
|
||||
}
|
||||
> .info{
|
||||
color: #cdcdcd;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
> .goSummaryReport{
|
||||
margin-top: 2rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: #4d52c3;
|
||||
border-radius: 3.4rem;
|
||||
line-height: 3rem;
|
||||
width: 11rem;
|
||||
text-align: center;
|
||||
border: .6px solid #e3e3e3;
|
||||
box-shadow: 0 .4rem 1.5rem -.5rem rgba(0,0,0,.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .summaryReport{
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,111 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { getMousePosition } from '@/utils/tools'
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'result',
|
||||
])
|
||||
let data = reactive({
|
||||
tlRight:gsap.timeline({ paused: true }),
|
||||
tlLeft:gsap.timeline({ paused: true }),
|
||||
imgEvent:{} as any,
|
||||
})
|
||||
|
||||
let imgDom = ref()
|
||||
const submit = (index:number)=>{
|
||||
emit('result',index)
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const {} = toRefs(data);
|
||||
defineExpose({
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="judge">
|
||||
<div class="edit">
|
||||
<div class="title">Whose style do you think this is?</div>
|
||||
<img
|
||||
ref="imgDom"
|
||||
:src="item.itemImagePath" alt="">
|
||||
<div class="btnBox">
|
||||
<div class="select">
|
||||
<div class="item" @click="submit(1)">123</div>
|
||||
<div class="item" @click="submit(2)">123</div>
|
||||
<div class="item" @click="submit(3)">123</div>
|
||||
<div class="item" @click="submit(4)">123</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.judge{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
> .edit{
|
||||
padding: 0 3rem;
|
||||
padding-bottom: 1.6rem;
|
||||
margin-top: 1.7rem;
|
||||
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
padding-bottom: 7rem;
|
||||
> .title{
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
> img{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 1.2rem;
|
||||
box-shadow: .7rem .4rem 1rem -0rem rgba(0,0,0,.2);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
> .btnBox{
|
||||
// margin-top: 1.6rem;
|
||||
margin-top: 1.6rem;
|
||||
width: 100%;
|
||||
> .select{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
> .item{
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
padding: 0 1.8rem;
|
||||
line-height: 2.4rem;
|
||||
color: #4D52C3;
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
background-color: #fff;
|
||||
border: 2px solid #dadada;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0px .4rem .4rem 0px rgba(0,0,0,0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,160 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { getMousePosition } from '@/utils/tools'
|
||||
import { gsap, TweenMax } from "gsap";
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'result',
|
||||
])
|
||||
let data = reactive({
|
||||
tlRight:gsap.timeline({ paused: true }),
|
||||
tlLeft:gsap.timeline({ paused: true }),
|
||||
imgEvent:{} as any,
|
||||
})
|
||||
|
||||
let imgDom = ref()
|
||||
let noLikeDom = ref()
|
||||
let likeDom = ref()
|
||||
|
||||
const setLikeOrOnLike = (event:any)=>{
|
||||
imgDom.value.style.transition = ''
|
||||
data.imgEvent = event
|
||||
|
||||
// document.addEventListener('mousemove', sizeMouseMove);
|
||||
document.addEventListener('touchmove', sizeTouchmove);
|
||||
// document.addEventListener('mouseup', sizeMouseup);
|
||||
document.addEventListener('touchend', sizeMouseup);
|
||||
}
|
||||
const sizeTouchmove = (event:any)=>{
|
||||
let e:any = getMousePosition(event,true)
|
||||
let moveSize = data.imgEvent.screenX - e?.screenX
|
||||
let domWidth = e?.target.parentNode.parentNode.offsetWidth
|
||||
if(moveSize > 0){
|
||||
data.tlLeft.progress(Math.abs(moveSize) / domWidth)
|
||||
}else{
|
||||
data.tlRight.progress(Math.abs(moveSize) / domWidth)
|
||||
}
|
||||
}
|
||||
const sizeMouseup = (event:any)=>{
|
||||
let e:any = getMousePosition(event,true)
|
||||
let moveSize = data.imgEvent.screenX - e?.screenX
|
||||
let domWidth = e?.target.parentNode.parentNode.offsetWidth
|
||||
let moveScale = Math.abs(moveSize) / domWidth
|
||||
if(moveScale > .4){
|
||||
emit('result',moveSize)
|
||||
}else{
|
||||
imgDom.value.style.transition = 'all .3s'
|
||||
data.tlLeft.progress(0)
|
||||
data.tlRight.progress(0)
|
||||
}
|
||||
// document.removeEventListener('mousemove',this.sizeMouseMove)
|
||||
document.removeEventListener('touchmove',sizeTouchmove)
|
||||
// document.removeEventListener('mouseup',this.sizeMouseup)
|
||||
document.removeEventListener('touchend',sizeMouseup)
|
||||
}
|
||||
const reset = ()=>{
|
||||
data.tlLeft.progress(0)
|
||||
data.tlRight.progress(0)
|
||||
}
|
||||
const cliSetNext = (num:number)=>{
|
||||
imgDom.value.style.transition = 'all .3s'
|
||||
if(num > 0){
|
||||
data.tlLeft.progress(1)
|
||||
}else{
|
||||
data.tlRight.progress(1)
|
||||
}
|
||||
setTimeout(()=>{
|
||||
imgDom.value.style.transition = 'all .0s'
|
||||
emit('result',num)
|
||||
},300)
|
||||
}
|
||||
onMounted(()=>{
|
||||
data.tlRight.to(imgDom.value, { rotation: 20, duration: 1 }, 0) // 第 0 秒开始
|
||||
.to(likeDom.value, { scale:1.3, duration: 1 }, '-=1')
|
||||
data.tlLeft.to(imgDom.value, { rotation: -20, duration: 1 }, 0) // 第 0 秒开始
|
||||
.to(noLikeDom.value, { scale:1.3, duration: 1 }, '-=1')
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const {} = toRefs(data);
|
||||
defineExpose({
|
||||
reset,
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="judge">
|
||||
<div class="edit">
|
||||
<div class="title">123123123</div>
|
||||
<img
|
||||
ref="imgDom"
|
||||
@mousedown.stop="setLikeOrOnLike(getMousePosition($event,false))"
|
||||
@touchstart.passive="setLikeOrOnLike(getMousePosition($event,true))"
|
||||
:src="item.itemImagePath" alt="">
|
||||
<div class="btnBox">
|
||||
<div class="likeOrNoLike">
|
||||
<img ref="noLikeDom" @click="cliSetNext(1)" src="@/assets/images/workshop/workshop2No.png" alt="">
|
||||
<img ref="likeDom" @click="cliSetNext(-1)" class="likeDom" src="@/assets/images/workshop/workshop2Yes.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.judge{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
> .edit{
|
||||
padding: 0 3rem 3rem 3rem;
|
||||
padding-bottom: 1.6rem;
|
||||
margin-top: 1.7rem;
|
||||
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
padding-bottom: 3.5rem;
|
||||
> .title{
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
> img{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 1.2rem;
|
||||
box-shadow: .7rem .4rem 1rem -0rem rgba(0,0,0,.2);
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
> .btnBox{
|
||||
// margin-top: 1.6rem;
|
||||
padding: 0 1.8rem;
|
||||
margin-top: 1.6rem;
|
||||
width: 100%;
|
||||
> .likeOrNoLike{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> img{
|
||||
width: 6.6rem;
|
||||
height: 6.6rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,113 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
// const props = defineProps({
|
||||
// })
|
||||
const emit = defineEmits([
|
||||
'next'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
const next = ()=>{
|
||||
emit('next')
|
||||
}
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="result">
|
||||
<div class="icon">😄</div>
|
||||
<div class="title">Correct! You got it!</div>
|
||||
<div class="keyPoint">
|
||||
<div class="aiBot">
|
||||
<img src="@/assets/images/workshop/workshop2Bot.png" alt="">
|
||||
<div>AI Bot:</div>
|
||||
</div>
|
||||
<div class="text">1312312312312312323123123123</div>
|
||||
</div>
|
||||
<div class="next" @click="next">
|
||||
<div>Next</div>
|
||||
<img src="@/assets/images/workshop/workshopRight.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.result{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
> div{
|
||||
flex-shrink: 0;
|
||||
}
|
||||
> .icon{
|
||||
font-size: 14.3rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
margin-bottom: .6rem;
|
||||
}
|
||||
> .title{
|
||||
font-size: 2.8rem;
|
||||
font-family: poppinsBold;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: #4D52C3;
|
||||
}
|
||||
> .keyPoint{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
width: calc(100% - 30px * 2);
|
||||
margin: 0 auto;
|
||||
height: 21.5rem;
|
||||
padding: 1.8rem 1.6rem 0;
|
||||
border: 2px solid #b7b9e9;
|
||||
border-radius: 2rem;
|
||||
box-shadow: 0px .7rem .4rem 0px rgba(0, 0, 0, 0.15);
|
||||
margin-bottom: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
> .aiBot{
|
||||
margin-bottom: .6rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img{
|
||||
margin-right: .4rem;
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
font-family: poppinsRegular;
|
||||
}
|
||||
}
|
||||
> .next{
|
||||
margin: 0 3rem 0 auto;
|
||||
border: 1px solid #4d52c3;
|
||||
height: 3.6rem;
|
||||
display: flex;
|
||||
font-size: 1.6rem;
|
||||
border-radius: 1rem;
|
||||
padding: 0 1.3rem 0 1.6rem;
|
||||
color: #4D52C3;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
> img{
|
||||
margin-left: .6rem;
|
||||
width: .5rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,274 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import {getCalculateReport} from '@/api/workshop'
|
||||
|
||||
const props = defineProps({
|
||||
isSummaryReport:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
calculateReport:{
|
||||
type:Object,
|
||||
default:()=>{},
|
||||
},
|
||||
})
|
||||
const emit = defineEmits([
|
||||
'update:isSummaryReport'
|
||||
])
|
||||
let data = reactive({
|
||||
})
|
||||
const goBack = ()=>{
|
||||
emit('update:isSummaryReport',false)
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const {} = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="summaryReport">
|
||||
<img class="bg" src="@/assets/images/workshop/workshop2SuccessBg.png" alt="">
|
||||
<div class="header">
|
||||
Swipe Style
|
||||
<img @click="goBack" src="@/assets/images/workshop/workshop2Back.png" alt="">
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="topThree">
|
||||
<div class="item item1">
|
||||
<div class="head">
|
||||
<img class="one" src="@/assets/images/workshop/workshop2TopicOne.png" alt="">
|
||||
<img class="profile" src="@/assets/images/workshop/editProfile.png" alt="">
|
||||
</div>
|
||||
<div class="name">Name</div>
|
||||
<div class="points">
|
||||
99
|
||||
points
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item2">
|
||||
<div class="head">
|
||||
<img class="profile" src="@/assets/images/workshop/editProfile.png" alt="">
|
||||
</div>
|
||||
<div class="name">Name</div>
|
||||
<div class="points">
|
||||
99
|
||||
points
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item3">
|
||||
<div class="head">
|
||||
<img class="profile" src="@/assets/images/workshop/editProfile.png" alt="">
|
||||
</div>
|
||||
<div class="name">Name</div>
|
||||
<div class="points">
|
||||
99
|
||||
points
|
||||
</div>
|
||||
</div>
|
||||
<div class="topThreeBg">
|
||||
<img src="@/assets/images/workshop/workshopTopThree.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabulate">
|
||||
<div class="bgImg">
|
||||
<img src="@/assets/images/workshop/workshop2TopicList.png" alt="">
|
||||
<div class="placeholder"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="roll">
|
||||
<div class="item">
|
||||
<div class="serialNum">1</div>
|
||||
<div class="profile">
|
||||
<img src="@/assets/images/workshop/editProfile.png" alt="">
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="name">Name</div>
|
||||
<div class="points">90 points</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.summaryReport{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
> .bg{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #4d52c3;
|
||||
}
|
||||
> .header{
|
||||
padding: .9rem 0;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 2.4rem;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-family: poppinsBold;
|
||||
margin-bottom: 1.2rem;
|
||||
> img{
|
||||
position: absolute;
|
||||
left: 3rem;
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
> .body{
|
||||
flex: 1;
|
||||
> .topThree{
|
||||
position: relative;
|
||||
width: 31.8rem;
|
||||
margin: 0 auto;
|
||||
> .topThreeBg{
|
||||
width: 31.8rem;
|
||||
padding-top: 17rem;
|
||||
height: auto;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
> .item{
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .head{
|
||||
position: relative;
|
||||
> .one{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
}
|
||||
> .profile{
|
||||
margin-top: 3rem;
|
||||
width: 5.6rem;
|
||||
height: 5.6rem;
|
||||
}
|
||||
}
|
||||
> .name{
|
||||
margin-bottom: .4rem;
|
||||
color: #fff;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
> .points{
|
||||
border-radius: 1.2rem;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
padding: 0 1.2rem;
|
||||
line-height: 3.4rem;
|
||||
background-color: #cbcdf1;
|
||||
color: #4D52C3;
|
||||
}
|
||||
}
|
||||
> .item1{
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 0;
|
||||
}
|
||||
> .item2{
|
||||
left: 1.9rem;
|
||||
top: calc(6.2rem - 3rem);
|
||||
}
|
||||
> .item3{
|
||||
top: calc(9.4rem - 3rem);
|
||||
left: auto;
|
||||
right: 1.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .tabulate{
|
||||
margin: 0 .8rem;
|
||||
margin-top: -12rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
> .bgImg{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
> .placeholder{
|
||||
margin-top: -1rem;
|
||||
width: 100%;
|
||||
height: 13rem;
|
||||
background-color: #efeefc;
|
||||
}
|
||||
}
|
||||
> .content{
|
||||
padding: 3.2rem 1.6rem 0 1.6rem;
|
||||
height: 100%;
|
||||
// height: calc(100% + 12rem);
|
||||
> .roll{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
> .item{
|
||||
margin-bottom: 1.6rem;
|
||||
background-color: #ffffff;
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 9.2rem;
|
||||
> .serialNum{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 350;
|
||||
color: #858494;
|
||||
margin-left: 2.3rem;
|
||||
}
|
||||
> .profile{
|
||||
margin-left: 2.3rem;
|
||||
width: 5.6rem;
|
||||
height: 5.6rem;
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
> .user{
|
||||
margin-left: 1.6rem;
|
||||
> .name{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: #0c092a;
|
||||
margin-bottom: .4rem;
|
||||
}
|
||||
> .points{
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: #858494;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,67 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import {getQueryPage} from '@/api/workshop'
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
|
||||
const store = useWorkshopStore()
|
||||
let dataDom = reactive({
|
||||
loadingDom:null as any,
|
||||
})
|
||||
let data = reactive({
|
||||
|
||||
})
|
||||
onMounted(()=>{
|
||||
// getQueryPage({page:1,size:200}).then((rv:any)=>{
|
||||
// store.setQueryList(rv.content)
|
||||
// })
|
||||
getQueryPage({page:1,size:200}).then((rv:any)=>{
|
||||
store.setQueryList(rv.content)
|
||||
})
|
||||
setTimeout(()=>{
|
||||
dataDom.loadingDom.style.opacity = '0';
|
||||
setTimeout(()=>{
|
||||
dataDom.loadingDom.style.display = 'none';
|
||||
},1000)
|
||||
},3000)
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const { loadingDom } = toRefs(dataDom);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshop">
|
||||
<div class="loading" ref="loadingDom">
|
||||
<img src="@/assets/images/workshop/loadingPage.png" alt="">
|
||||
</div>
|
||||
<RouterView />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workshop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
> .loading{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2;
|
||||
transition: all 1s;
|
||||
background: #fff;
|
||||
img{
|
||||
width: 25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,223 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, computed, watch } from "vue";
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
import {userSave} from '@/api/workshop'
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
import editJudge from '../components/edit/editJudge.vue'
|
||||
import editChoice from '../components/edit/editChoice.vue'
|
||||
import result from '../components/edit/result.vue'
|
||||
const store = useWorkshopStore()
|
||||
const router = useRouter()
|
||||
|
||||
let data = reactive({
|
||||
selectIndex:0,
|
||||
isResult:false,
|
||||
})
|
||||
let queryList = ref([
|
||||
{
|
||||
id:1,
|
||||
count:null as any,
|
||||
type:'judge',
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
count:null as any,
|
||||
type:'choice',
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
count:null as any,
|
||||
type:'choice',
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
count:null as any,
|
||||
type:'judge',
|
||||
},
|
||||
] as any)
|
||||
// let queryList = computed(()=>store.queryList) as any
|
||||
|
||||
let editDom = ref(null) as any
|
||||
let editJudgeDom = ref(null) as any
|
||||
let editChoiceDom = ref(null) as any
|
||||
|
||||
const judgeResult = (moveSize:any)=>{
|
||||
editDom.value.style.transition = 'all .3s'
|
||||
editDom.value.style.opacity = '0'
|
||||
if(moveSize > 0){
|
||||
queryList.value[data.selectIndex].count = false
|
||||
}else{
|
||||
queryList.value[data.selectIndex].count = true
|
||||
}
|
||||
setTimeout(()=>{
|
||||
data.isResult = true
|
||||
},300)
|
||||
}
|
||||
const choiceResult = (number:number)=>{
|
||||
editDom.value.style.transition = 'all .3s'
|
||||
editDom.value.style.opacity = '0'
|
||||
queryList.value[data.selectIndex].count = number
|
||||
setTimeout(()=>{
|
||||
data.isResult = true
|
||||
},300)
|
||||
}
|
||||
const next = ()=>{
|
||||
data.selectIndex++
|
||||
editDom.value.style.transition = ''
|
||||
editDom.value.style.opacity = '1'
|
||||
data.isResult = false
|
||||
editJudgeDom.value.reset()
|
||||
}
|
||||
watch(()=>data.selectIndex,(newVal,oldVal)=>{
|
||||
let value = {
|
||||
userId:store.userData.id,
|
||||
questionNum:queryList.value[oldVal].id,
|
||||
isLike:queryList.value[oldVal].count,
|
||||
}
|
||||
// userSave(value)
|
||||
if(newVal == queryList.value.length){
|
||||
router.push({
|
||||
path:'/activities/workshop2/success',
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(()=>{
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const { selectIndex, isResult } = toRefs(data)
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshopEdit">
|
||||
<div class="header">
|
||||
Swipe Style
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="header">
|
||||
<div class="profile">
|
||||
<img src="@/assets/images/workshop/editProfile.png" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="info">{{ store.userData.title }}</div>
|
||||
<div class="info">{{ store.userData.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="label">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/workshop/workshop2Topic.png" alt="">
|
||||
</div>
|
||||
<div class="text">{{ selectIndex + 1 }}/{{queryList.length}}</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/workshop/workshop2Ranking.png" alt="">
|
||||
</div>
|
||||
<div class="text">{{ selectIndex + 1 }}/{{queryList.length}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit" ref="editDom" v-show="!isResult" v-if="queryList?.length > selectIndex">
|
||||
<editJudge v-show="queryList?.[selectIndex].type == 'judge'" ref="editJudgeDom" @result="judgeResult" :item="queryList?.[selectIndex]"></editJudge>
|
||||
<editChoice v-show="queryList?.[selectIndex].type == 'choice'" ref="editChoiceDom" @result="choiceResult" :item="queryList?.[selectIndex]"></editChoice>
|
||||
|
||||
</div>
|
||||
<div class="edit" v-show="isResult">
|
||||
<result @next="next"></result>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workshopEdit {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
touch-action: none; /* 完全禁用浏览器默认触摸行为 */
|
||||
> .header{
|
||||
margin-top: .9rem;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
text-align: center;
|
||||
font-family: poppinsSemiBold;
|
||||
}
|
||||
> .user{
|
||||
margin-top: 1.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 3rem;
|
||||
> .header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .profile{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: .8rem;
|
||||
> img{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
> .info{
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .progress{
|
||||
// display: flex;
|
||||
|
||||
> .label{
|
||||
border: 1px solid #cbcdf1;
|
||||
width: 7.2rem;
|
||||
height: 2.4rem;
|
||||
background: #f6f7ff;
|
||||
border-radius: 1rem;
|
||||
color: #4d52c3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: .4rem;
|
||||
&:last-child{
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
> .icon{
|
||||
margin-right: .35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
> img{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
}
|
||||
> .text{
|
||||
font-weight: 700;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
> .edit{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,176 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
import {userCreate} from '@/api/workshop'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const store = useWorkshopStore()
|
||||
const props = defineProps({
|
||||
})
|
||||
const emit = defineEmits([
|
||||
]);
|
||||
let data = reactive({
|
||||
describe:'',
|
||||
title:'',
|
||||
name:'',
|
||||
})
|
||||
const goEditWorkshop = ()=>{
|
||||
if(!data.title){
|
||||
return ElMessage({
|
||||
message: 'Please enter the title.',
|
||||
type: 'primary' as any,
|
||||
})
|
||||
}
|
||||
if(!data.name){
|
||||
return ElMessage({
|
||||
message: 'Please enter your name.',
|
||||
type: 'primary' as any,
|
||||
})
|
||||
}
|
||||
let value = {
|
||||
title:data.title,
|
||||
name:data.name,
|
||||
}
|
||||
userCreate(value).then((rv:any)=>{
|
||||
// store.setLogin({title:data.title,name:data.name,id:rv.id})
|
||||
router.push('/activities/workshop/edit')
|
||||
})
|
||||
}
|
||||
onMounted(()=>{
|
||||
console.log(useWorkshopStore())
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
})
|
||||
const { title, name } = toRefs(data);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshopLogin">
|
||||
<div class="title">
|
||||
<p>Swipe Style</p>
|
||||
<div class="info">Welcome back!</div>
|
||||
<img src="@/assets/images/workshop/loginTitleImg.png" alt="">
|
||||
</div>
|
||||
<div class="userInput">
|
||||
<label>
|
||||
<span>Job Title</span>
|
||||
<input type="text" v-model="title" placeholder="Your job title">
|
||||
</label>
|
||||
<label>
|
||||
<span>Name</span>
|
||||
<input type="text" v-model="name" placeholder="Your name">
|
||||
</label>
|
||||
</div>
|
||||
<div class="enter" @click="goEditWorkshop">Enter</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.workshopLogin {
|
||||
.title{
|
||||
padding-top: 3.3rem;
|
||||
margin: 0 auto;
|
||||
color: #4D52C3;
|
||||
position: relative;
|
||||
width: 31.3rem;
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 3.5rem;
|
||||
> p{
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
font-family: poppinsBold;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
> .info{
|
||||
font-size: 2rem;
|
||||
margin-top: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
> img{
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-left: 11rem;
|
||||
}
|
||||
}
|
||||
> .userInput{
|
||||
width: 31.3rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 6.5rem;
|
||||
> label{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: .8rem;
|
||||
&:last-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
> span{
|
||||
font-size: 1.2rem;
|
||||
color: #626262;
|
||||
margin-bottom: .8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
input, textarea{
|
||||
font-size: 1.2rem;
|
||||
&:focus{
|
||||
outline: none; /* 清除默认焦点样式 */
|
||||
}
|
||||
}
|
||||
> input{
|
||||
border-radius: .87rem;
|
||||
padding: 1.7rem;
|
||||
background: #f1f4ff;
|
||||
border: 1.7px #4d52c3 solid;
|
||||
}
|
||||
> .textarea{
|
||||
background: #f1f4ff;
|
||||
border: none;
|
||||
height: 13rem;
|
||||
border-radius: .87rem;
|
||||
padding: 1.7rem;
|
||||
> textarea{
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
> .textareaNum{
|
||||
font-size: 1.2rem;
|
||||
color: #626262;
|
||||
margin-left: auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .enter{
|
||||
width: 31.3rem;
|
||||
margin: 0 auto;
|
||||
font-size: 1.74rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #4d52c3;
|
||||
border-radius: 1.3rem;
|
||||
height: 5.2rem;
|
||||
line-height: 5.2rem;
|
||||
box-shadow: 0px .8rem 1.7rem 0px #cbd6ff;
|
||||
cursor: pointer;
|
||||
font-family: poppinsSemiBold;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
import SummaryReport from '../components/summaryReport/index.vue'
|
||||
import { useWorkshopStore } from '@/stores/modules/workshop'
|
||||
import {getCalculateReport} from '@/api/workshop'
|
||||
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
})
|
||||
const emit = defineEmits({
|
||||
})
|
||||
const store = useWorkshopStore()
|
||||
let data = reactive({
|
||||
isSummaryReport:false,
|
||||
calculateReport:null as any,
|
||||
count:0,
|
||||
})
|
||||
let queryList = computed(()=>store.queryList) as any
|
||||
|
||||
const goSummaryReport = ()=>{
|
||||
// data.loadingSuccess = true
|
||||
data.isSummaryReport = true
|
||||
}
|
||||
let time = null as any;
|
||||
const getCalculate = ()=>{
|
||||
getCalculateReport().then((rv:any)=>{
|
||||
data.calculateReport = rv
|
||||
if(rv.count < 3){
|
||||
}else{
|
||||
}
|
||||
if(rv.answeringCount > 0){
|
||||
time = setTimeout(()=>{
|
||||
getCalculate()
|
||||
},1000)
|
||||
}
|
||||
})
|
||||
}
|
||||
const setResiart = ()=>{
|
||||
router.push({path:'/activities/workshop2/edit'})
|
||||
}
|
||||
onMounted(()=>{
|
||||
getCalculate()
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
clearTimeout(time)
|
||||
})
|
||||
const { isSummaryReport, calculateReport } = toRefs(data);
|
||||
</script>
|
||||
<template>
|
||||
<div class="workshopSuccess">
|
||||
<div class="loadingSuccess" v-show="!isSummaryReport">
|
||||
<div class="congratulations">
|
||||
<div class="icon">🎉</div>
|
||||
<div class="text">
|
||||
<div class="title">Congratulations!</div>
|
||||
<div class="info">You have completed all your selections!</div>
|
||||
<div class="describe">Your AI's compatibility with you is: <span>{{ queryList.filter((item:any)=>item?.count).length }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statusBox">
|
||||
<div class="goSummaryReport" @click="setResiart">
|
||||
<img class="workshopRestart" src="@/assets/images/workshop/workshopRestart.png" alt="">
|
||||
<div>Resiart</div>
|
||||
</div>
|
||||
<div class="goSummaryReport" @click="goSummaryReport">
|
||||
<div>Load More</div>
|
||||
<img class="workshopRight" src="@/assets/images/workshop/workshopRight.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summaryReport" v-show="isSummaryReport">
|
||||
<SummaryReport v-model:isSummaryReport="isSummaryReport" :calculateReport="calculateReport" ref="summaryReport"></SummaryReport>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.workshopSuccess{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
> .loadingSuccess{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
> .congratulations{
|
||||
margin: 0 auto;
|
||||
// margin-top: 11.7rem;
|
||||
width: 27rem;
|
||||
margin-bottom: 2.7rem;
|
||||
> img{
|
||||
margin: 0 auto;
|
||||
width: 15.4rem;
|
||||
height: 15.4rem;
|
||||
}
|
||||
> div{
|
||||
text-align: center;
|
||||
}
|
||||
> .icon{
|
||||
font-size: 12.8rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
> .text{
|
||||
> .title{
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
color: #4d52c3;
|
||||
font-family: poppinsBold;
|
||||
}
|
||||
> .info{
|
||||
font-weight: 500;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .describe{
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
> span{
|
||||
color: #4D52C3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .statusBox{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
> .goSummaryReport{
|
||||
margin-right: 3.2rem;
|
||||
font-family: poppinsBold;
|
||||
margin-top: 2rem;
|
||||
cursor: pointer;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: #4d52c3;
|
||||
border-radius: 3.4rem;
|
||||
height: 3rem;
|
||||
text-align: center;
|
||||
padding: 0 1.1rem;
|
||||
border: .6px solid #e3e3e3;
|
||||
box-shadow: 0 .4rem 1.5rem -.5rem rgba(0,0,0,.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
> .workshopRestart{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-right: .4rem;
|
||||
}
|
||||
> .workshopRight{
|
||||
width: .6rem;
|
||||
height: .8rem;
|
||||
margin-left: .4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .summaryReport{
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user