分割
This commit is contained in:
@@ -81,6 +81,7 @@ import { getUploadUrl } from "@/tool/util";
|
||||
import scaleImage from "@/component/HomePage/scaleImage.vue";
|
||||
import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import store from "@/store";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MailOutlined,
|
||||
@@ -90,7 +91,8 @@ export default defineComponent({
|
||||
props: ["msg",'sketchCatecoryList'],
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const route:any = useRoute()
|
||||
// const route:any = useRoute()
|
||||
const store:any = useStore()
|
||||
const state:any = reactive({
|
||||
rootSubmenuKeys: [{
|
||||
name:'All User',
|
||||
@@ -263,7 +265,7 @@ export default defineComponent({
|
||||
//储存所有用户id和name
|
||||
Https.axiosGet(Https.httpUrls.getAllUserId,).then((rv: any) => {
|
||||
if (rv) {
|
||||
sessionStorage.setItem('allUserList',JSON.stringify(rv));
|
||||
store.commit('setAllUserList',rv);
|
||||
}
|
||||
})
|
||||
let allCountry = country
|
||||
|
||||
@@ -14,20 +14,20 @@
|
||||
<!-- 点击事件就用下面的div -->
|
||||
<!-- <div class="attention_item attention_item_active"> -->
|
||||
<div>{{ userInfo?.followeeCount }}</div>
|
||||
<span>关注</span>
|
||||
<span>{{$t('account.Follow')}}</span>
|
||||
</div>
|
||||
<div class="attention_item">
|
||||
<div>{{ userInfo?.followerCount }}</div>
|
||||
<span>粉丝</span>
|
||||
<span>{{$t('account.Fans')}}</span>
|
||||
</div>
|
||||
<div class="attention_item">
|
||||
<!-- <div class="attention_item">
|
||||
<div>22</div>
|
||||
<span>作品数</span>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="homeMain_user_detail_item homeMain_user_detail_setUser" @click="openAccount">
|
||||
<i class="fi fi-rr-user"></i>
|
||||
<div>个人中心</div>
|
||||
<div>{{$t('Header.personal')}}</div>
|
||||
<i class="icon iconfont icon-xiala"></i>
|
||||
</div>
|
||||
</div>
|
||||
@@ -48,11 +48,7 @@
|
||||
></div>
|
||||
|
||||
</div>
|
||||
<div class="trialApproval button_second credits message">
|
||||
<a-badge :count="messageNum">
|
||||
<i class="fi fi-rr-envelope" @click="openMessage"></i>
|
||||
</a-badge>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="trialApproval button_second credits hideChecked"
|
||||
>
|
||||
@@ -85,11 +81,29 @@
|
||||
</nav> -->
|
||||
<navRouter :routerList="navRouterList"></navRouter>
|
||||
<div class="homeMain_right">
|
||||
<img
|
||||
<!-- <img
|
||||
class="homeMain_logo"
|
||||
@click="turnToNewPage('https://www.aidlab.hk/en/')"
|
||||
src="@/assets/images/loginPage/aida_logo.png"
|
||||
/>
|
||||
/> -->
|
||||
<div class="trialApproval credits message">
|
||||
<div class="message_iconItem">
|
||||
<a-badge :count="messageNum">
|
||||
<i class="fi fi-rr-envelope" @click="openMessage"></i>
|
||||
</a-badge>
|
||||
</div>
|
||||
|
||||
<div class="message_iconItem">
|
||||
<a-badge :count="messageType?.newPosted">
|
||||
<!-- <i class="fi fi-rr-envelope" @click="openMessage"></i> -->
|
||||
<i class="fi fi-rr-bell" @click.stop="openNewPosted"></i>
|
||||
</a-badge>
|
||||
<div class="message_iconItem_value select_block" v-show="isNewPosted" style="width: 40rem">
|
||||
<newPosted ref="newPosted"></newPosted>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Habit></Habit>
|
||||
</div>
|
||||
<nav class="select_block" v-show="isShowOperate">
|
||||
@@ -149,7 +163,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script >
|
||||
import { defineComponent, createVNode, ref, computed, onMounted } from "vue";
|
||||
import { defineComponent, createVNode, ref,toRefs, reactive, computed, onMounted } from "vue";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
|
||||
import payOrder from "@/component/Pay/payOrder.vue";
|
||||
@@ -162,6 +176,7 @@ import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import RobotAssist from "@/component/HomePage/RobotAssist.vue";
|
||||
import scaleVideo from "@/component/HomePage/scaleVideo.vue";
|
||||
import newPosted from "@/component/HomePage/newPosted.vue";
|
||||
import navRouter from "@/component/modules/navRouter.vue";
|
||||
import { useStore } from "vuex";
|
||||
import { setLang } from "@/tool/guide";
|
||||
@@ -177,6 +192,7 @@ export default defineComponent({
|
||||
Habit,
|
||||
RobotAssist,
|
||||
scaleVideo,
|
||||
newPosted,
|
||||
UpgradePlan,
|
||||
payOrder,
|
||||
TaskPage,
|
||||
@@ -194,6 +210,7 @@ export default defineComponent({
|
||||
let credits = computed(()=>{
|
||||
return store.state.UserHabit.credits.value
|
||||
})
|
||||
|
||||
let activeCredits = ref(false)
|
||||
let getLangIsShowMark = ref(true)
|
||||
let AdministratorUserIdList = [88,6,46,31,73,83,87,4]
|
||||
@@ -223,6 +240,19 @@ export default defineComponent({
|
||||
let messageNum = computed(()=>{
|
||||
return store.state.UserHabit.messageSystem.messageNum
|
||||
})
|
||||
let messageType = computed(()=>{
|
||||
return store.state.UserHabit.messageSystem.messageType
|
||||
})
|
||||
let stateList = reactive({
|
||||
isNewPosted:false,
|
||||
isShowOperate:false,
|
||||
isLanguage:false,
|
||||
})
|
||||
let isNewPosted = ref(false)
|
||||
let isShowOperate = ref(false)
|
||||
let isLanguage = ref(false)
|
||||
|
||||
let newPosted = ref(null)
|
||||
let getUnreadCount = ()=>{
|
||||
Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
|
||||
if(rv){
|
||||
@@ -230,9 +260,9 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
MyWs.linkWs("ws://"+MyWs.messageUrl,'message')
|
||||
let getWsMessage = (data)=>{
|
||||
console.log(data);
|
||||
store.commit('setMessageSystem',...data)
|
||||
}
|
||||
MyEvent.add('getMessage',getWsMessage)
|
||||
@@ -242,6 +272,42 @@ export default defineComponent({
|
||||
// MyWs.ws.onmessage = (data)=>{
|
||||
// console.log(JSON.parse(data.data),232);
|
||||
// }
|
||||
|
||||
let openNewPosted = ()=>{
|
||||
stateList.isNewPosted = !stateList.isNewPosted
|
||||
newPosted.value.init()
|
||||
document.addEventListener(
|
||||
"click",
|
||||
closeShowOperateContent,
|
||||
false
|
||||
);
|
||||
}
|
||||
//点击下拉图标出现操作
|
||||
let changeShowOperateContent=() =>{
|
||||
stateList.isShowOperate = !stateList.isShowOperate;
|
||||
document.addEventListener(
|
||||
"click",
|
||||
closeShowOperateContent,
|
||||
false
|
||||
);
|
||||
}
|
||||
let changeLanguage=() =>{
|
||||
stateList.isLanguage = !stateList.isLanguage;
|
||||
document.addEventListener(
|
||||
"click",
|
||||
closeShowOperateContent,
|
||||
false
|
||||
);
|
||||
}
|
||||
|
||||
//关闭下拉图标
|
||||
let closeShowOperateContent=() =>{
|
||||
stateList.isShowOperate = false;
|
||||
stateList.isLanguage = false
|
||||
stateList.isNewPosted = false
|
||||
document.removeEventListener("click", closeShowOperateContent);
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
getUnreadCount()
|
||||
})
|
||||
@@ -258,11 +324,17 @@ export default defineComponent({
|
||||
AdministratorUserIdList,
|
||||
navRouterList,
|
||||
messageNum,
|
||||
messageType,
|
||||
...toRefs(stateList),
|
||||
newPosted,
|
||||
openNewPosted,
|
||||
changeShowOperateContent,
|
||||
changeLanguage,
|
||||
closeShowOperateContent,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowOperate: false,
|
||||
bindEmailVisible: false,
|
||||
isHaveBindEmail: false,
|
||||
bindEmailStep: 1,
|
||||
@@ -275,7 +347,6 @@ export default defineComponent({
|
||||
numTime: 30,
|
||||
timerSec: null,
|
||||
modalWarning: null,
|
||||
isLanguage: false,
|
||||
|
||||
language:[
|
||||
{name:'English',value:'ENGLISH'},
|
||||
@@ -397,31 +468,7 @@ export default defineComponent({
|
||||
|
||||
|
||||
},
|
||||
//点击下拉图标出现操作
|
||||
changeShowOperateContent() {
|
||||
this.isShowOperate = !this.isShowOperate;
|
||||
document.addEventListener(
|
||||
"click",
|
||||
this.closeShowOperateContent,
|
||||
false
|
||||
);
|
||||
},
|
||||
changeLanguage(){
|
||||
this.isLanguage = !this.isLanguage;
|
||||
document.addEventListener(
|
||||
"click",
|
||||
this.closeShowOperateContent,
|
||||
false
|
||||
);
|
||||
},
|
||||
|
||||
//关闭下拉图标
|
||||
closeShowOperateContent() {
|
||||
this.isShowOperate = false;
|
||||
this.isLanguage = false
|
||||
document.removeEventListener("click", this.closeShowOperateContent);
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -601,6 +648,39 @@ export default defineComponent({
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.message{
|
||||
display: flex;
|
||||
width: 6rem;
|
||||
justify-content: space-between;
|
||||
margin: 0 2rem;
|
||||
// padding: 1rem;
|
||||
i{
|
||||
margin-left: 0rem;
|
||||
border-left: none;
|
||||
padding-left: 0rem;
|
||||
height: auto;
|
||||
font-size: 2rem;
|
||||
width: 3rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
span{
|
||||
overflow: initial;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
}
|
||||
.message_iconItem{
|
||||
position: relative;
|
||||
display: flex;
|
||||
.message_iconItem_value{
|
||||
padding: 1rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeMain_logo {
|
||||
width: 14.4rem;
|
||||
@@ -726,6 +806,7 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 3.7rem;
|
||||
|
||||
&.marLeft2{
|
||||
margin-left: 2rem;
|
||||
}
|
||||
@@ -774,23 +855,7 @@ export default defineComponent({
|
||||
font-size: 1.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
&.message{
|
||||
// padding: 1rem;
|
||||
i{
|
||||
margin-left: 0rem;
|
||||
border-left: none;
|
||||
padding-left: 0rem;
|
||||
height: auto;
|
||||
width: 3rem;
|
||||
}
|
||||
span{
|
||||
overflow: initial;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-br-refresh{
|
||||
margin-left: 0;
|
||||
border-left: none;
|
||||
|
||||
@@ -1,54 +1,69 @@
|
||||
<template>
|
||||
<div class="homeRecommend_max Guide_1_16_1">
|
||||
<header class="homeRecommend_heade">
|
||||
<div class="homeRecommend_right_content">
|
||||
<div class="homeRecommend_user_content">
|
||||
<img
|
||||
class="homeRecommend_logo"
|
||||
@click="turnToNewPage('https://www.aidlab.hk/en/')"
|
||||
src="@/assets/images/loginPage/aida_logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="homeRecommend_right">
|
||||
<a class="started_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
|
||||
<div class="started_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
|
||||
<div class="started_btn started_btn2" v-if="systemUser.value != -1" @click="logout">log off</div>
|
||||
</div>
|
||||
<div class="homeRecommend_right" v-if="systemUser.value == -1">
|
||||
<div class="started_btn" @click="setLogin">Login</div>
|
||||
<div class="started_btn started_btn2" @click="setRegister">Visitor registration</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homeRecommend_content_body">
|
||||
<div class="homeRecommend_content_body_recommend" id="aaaa">
|
||||
<div class="content_body_recommend_left mdhidden">
|
||||
<img class="content_body_img1 content_body_img" src="/image/mainImg/img1.png" alt="">
|
||||
<img class="content_body_img2 content_body_img" src="/image/mainImg/img2.png" alt="">
|
||||
<img class="content_body_img3 content_body_img" src="/image/mainImg/img3.png" alt="">
|
||||
<img class="content_body_img4 content_body_img" src="/image/mainImg/img4.png" alt="">
|
||||
<img class="content_body_img5 content_body_img" src="/image/mainImg/img5.png" alt="">
|
||||
</div>
|
||||
<div class="content_body_recommend_center content_body_text">
|
||||
<div class="content_body_recommend_center_title">
|
||||
<h1>AiDA</h1>
|
||||
<h3>bloom your creativity</h3>
|
||||
<div class="homeRecommend_content_sticky">
|
||||
<header class="homeRecommend_heade">
|
||||
<div class="homeRecommend_right_content">
|
||||
<div class="homeRecommend_user_content">
|
||||
<img
|
||||
class="homeRecommend_logo"
|
||||
@click="turnToNewPage('https://www.aidlab.hk/en/')"
|
||||
src="@/assets/images/loginPage/aida_logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_body_recommend_center_btn">
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
|
||||
<div class="homeRecommend_right">
|
||||
<a class="started_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
|
||||
<div class="started_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
|
||||
<div class="started_btn started_btn2" v-if="systemUser.value != -1" @click="logout">log off</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_body_recommend_right mdhidden">
|
||||
<img class="content_body_img1 content_body_img" src="/image/mainImg/img6.png" alt="">
|
||||
<img class="content_body_img2 content_body_img" src="/image/mainImg/img7.png" alt="">
|
||||
<img class="content_body_img3 content_body_img" src="/image/mainImg/img8.png" alt="">
|
||||
<img class="content_body_img4 content_body_img" src="/image/mainImg/img9.png" alt="">
|
||||
<img class="content_body_img5 content_body_img" src="/image/mainImg/img10.png" alt="">
|
||||
<div class="homeRecommend_right" v-if="systemUser.value == -1">
|
||||
<div class="started_btn" @click="setLogin">Login</div>
|
||||
<div class="started_btn started_btn2" @click="setRegister">Visitor registration</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="homeRecommend_content_body_recommend">
|
||||
<div class="content_body_recommend_top">
|
||||
<h1>DESIGN <br> AIDA</h1>
|
||||
<div class="zindex">
|
||||
Slooming <br>
|
||||
Your Creativity
|
||||
</div>
|
||||
</div>
|
||||
<img src="../../public/video/homeVideo.gif" alt="">
|
||||
<!-- <video src="@/assets/video/homeVideo.mov" autoplay loop muted controls="controls" type="video/quicktime"></video> -->
|
||||
<div class="content_body_recommend_content">
|
||||
<div class="content_body_recommend_content_left">
|
||||
Start enjoying the amazing experiences <br>
|
||||
of using our AI-based <br>
|
||||
interactive design assistant.
|
||||
</div>
|
||||
<div class="content_body_recommend_content_right zindex">
|
||||
<i class="fi fi-rr-arrow-small-right"></i> Scroll Down
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_body_recommend_bottom ">
|
||||
<div class="zindex" @click="startCreating">Start Creating</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<navRouter :routerList="navRouterList"></navRouter>
|
||||
<router-view :isScroll="false"></router-view>
|
||||
|
||||
<!-- <div class="content_body_recommend_center content_body_text">
|
||||
<div class="content_body_recommend_center_title">
|
||||
<h1>AiDA</h1>
|
||||
<h3>bloom your creativity</h3>
|
||||
</div>
|
||||
<div class="content_body_recommend_center_btn">
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
|
||||
<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
|
||||
</div>
|
||||
</div> -->
|
||||
<div style="background-color: #fff;position: relative;">
|
||||
<!-- <navRouter :routerList="navRouterList"></navRouter> -->
|
||||
<router-view :isScroll="false"></router-view>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="homeRecommend_content_adminTop" @click="setAdminUp">
|
||||
<i class="fi fi-rr-arrow-small-up"></i>
|
||||
@@ -107,7 +122,7 @@ export default defineComponent({
|
||||
// router.push("/register");
|
||||
}
|
||||
let setAdminUp = ()=>{
|
||||
let scrollDom = document.querySelector('.homeRecommend_content_body')
|
||||
let scrollDom = document.querySelector('.homeRecommend_max')
|
||||
scrollDom.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth' // 平滑滚动到顶部
|
||||
@@ -131,7 +146,27 @@ export default defineComponent({
|
||||
let goHome = ()=>{
|
||||
router.push('/home');
|
||||
}
|
||||
let startCreating = ()=>{
|
||||
if(systemUser.value.value == -1){
|
||||
setLogin()
|
||||
}else if(systemUser.value.value == 0){
|
||||
window.open('https://code-create.com.hk/aida/','_blank')
|
||||
}else if(systemUser.value.value == 1){
|
||||
goHome()
|
||||
}
|
||||
}
|
||||
onMounted(()=>{
|
||||
let scrollDom = document.querySelector('.homeRecommend_max')
|
||||
scrollDom.addEventListener('scroll', function() {
|
||||
if(scrollDom.scrollTop > 200){
|
||||
document.querySelector('.homeRecommend_content_adminTop').style.opacity = '1'
|
||||
document.querySelector('.homeRecommend_content_adminTop').style.zIndex = 999
|
||||
}else{
|
||||
document.querySelector('.homeRecommend_content_adminTop').style.opacity = '0'
|
||||
document.querySelector('.homeRecommend_content_adminTop').style.opacity = '0'
|
||||
document.querySelector('.homeRecommend_content_adminTop').style.zIndex = 0
|
||||
}
|
||||
});
|
||||
if(window.innerWidth < 768){
|
||||
isMoblie.value = true
|
||||
}
|
||||
@@ -146,6 +181,7 @@ export default defineComponent({
|
||||
logout,
|
||||
goHome,
|
||||
isMoblie,
|
||||
startCreating,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -158,49 +194,49 @@ export default defineComponent({
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
nextTick().then(()=>{
|
||||
let dom = document.querySelector('.homeRecommend_content_body')
|
||||
let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
|
||||
let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
|
||||
for (let index = 0; index < codeTween.length; index++) {
|
||||
gsap.from(codeTween[index],.5, {scale:.6 },);
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
|
||||
ScrollTrigger.create({
|
||||
trigger: codeTween[index], // 触发器元素
|
||||
start: "top 0%", // 滚动触发器的起始滚动位置
|
||||
end: '200% 20%', // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
// onUpdate:(v)=>{
|
||||
// if(v.progress < 0.1){
|
||||
// v.trigger?.classList.remove('active')
|
||||
// }else{
|
||||
// v.trigger?.classList.add('active')
|
||||
// // v.trigger?.classList.add('active')
|
||||
// }
|
||||
// }
|
||||
});
|
||||
}
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
let tl1 = gsap.timeline();
|
||||
tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
|
||||
ScrollTrigger.create({
|
||||
trigger: codeTweenText, // 触发器元素
|
||||
start: "top 0%", // 滚动触发器的起始滚动位置
|
||||
end: '200% 20%', // 滚动触发器的结束滚动位置
|
||||
// markers: true, // 开启标注功能
|
||||
scrub: true,
|
||||
animation:tl1,
|
||||
scroller:dom,//设置指定元素为滚动依据
|
||||
scrub:2,
|
||||
// nextTick().then(()=>{
|
||||
// let dom = document.querySelector('.homeRecommend_content_body')
|
||||
// let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
|
||||
// let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
|
||||
// for (let index = 0; index < codeTween.length; index++) {
|
||||
// gsap.from(codeTween[index],.5, {scale:.6 },);
|
||||
// gsap.registerPlugin(ScrollTrigger);
|
||||
// let tl1 = gsap.timeline();
|
||||
// tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
|
||||
// ScrollTrigger.create({
|
||||
// trigger: codeTween[index], // 触发器元素
|
||||
// start: "top 0%", // 滚动触发器的起始滚动位置
|
||||
// end: '200% 20%', // 滚动触发器的结束滚动位置
|
||||
// // markers: true, // 开启标注功能
|
||||
// scrub: true,
|
||||
// animation:tl1,
|
||||
// scroller:dom,//设置指定元素为滚动依据
|
||||
// scrub:2,
|
||||
// // onUpdate:(v)=>{
|
||||
// // if(v.progress < 0.1){
|
||||
// // v.trigger?.classList.remove('active')
|
||||
// // }else{
|
||||
// // v.trigger?.classList.add('active')
|
||||
// // // v.trigger?.classList.add('active')
|
||||
// // }
|
||||
// // }
|
||||
// });
|
||||
// }
|
||||
// gsap.registerPlugin(ScrollTrigger);
|
||||
// let tl1 = gsap.timeline();
|
||||
// tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
|
||||
// ScrollTrigger.create({
|
||||
// trigger: codeTweenText, // 触发器元素
|
||||
// start: "top 0%", // 滚动触发器的起始滚动位置
|
||||
// end: '200% 20%', // 滚动触发器的结束滚动位置
|
||||
// // markers: true, // 开启标注功能
|
||||
// scrub: true,
|
||||
// animation:tl1,
|
||||
// scroller:dom,//设置指定元素为滚动依据
|
||||
// scrub:2,
|
||||
|
||||
});
|
||||
})
|
||||
// });
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -214,7 +250,11 @@ export default defineComponent({
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
&.homeRecommend_max::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.homeRecommend_content_body{
|
||||
flex: 1;
|
||||
}
|
||||
@@ -223,9 +263,11 @@ export default defineComponent({
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// padding: 0 30px;
|
||||
padding: 0 9rem;
|
||||
// padding: 0 9rem;
|
||||
padding: 4rem 2rem;
|
||||
padding-bottom: 0;
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
// height: 7rem;
|
||||
flex-shrink: 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
// border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
|
||||
@@ -294,142 +336,73 @@ export default defineComponent({
|
||||
|
||||
}
|
||||
.homeRecommend_content_body{
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
&.homeRecommend_content_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
// overflow-y: auto;
|
||||
// overflow-x: hidden;
|
||||
|
||||
// &.homeRecommend_content_body::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
.homeRecommend_content_sticky{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
.zindex{
|
||||
z-index: 2;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
br{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.homeRecommend_content_body_recommend{
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
position: relative;
|
||||
padding: 0 2rem;
|
||||
padding-right: 4rem;
|
||||
border-bottom: 1px solid #ececec;
|
||||
|
||||
.content_body_recommend_left,
|
||||
.content_body_recommend_right{
|
||||
--margin:3rem;
|
||||
padding-top: 10rem;
|
||||
padding-bottom: 15rem;
|
||||
@media (max-width: 768px) {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
img{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
img{
|
||||
border-radius: 2rem;
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
object-fit: cover;
|
||||
width: 50%;
|
||||
right: 0;
|
||||
top: -5%;
|
||||
width: 70%;
|
||||
@media (max-width: 768px) {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.content_body_recommend_top,.content_body_recommend_content{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.content_body_recommend_top{
|
||||
h1{
|
||||
font-family: 'pixel';
|
||||
line-height: .6;
|
||||
font-size: 50rem;
|
||||
margin: 0;
|
||||
@media (max-width: 768px) {
|
||||
font-size: 30rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
div{
|
||||
font-size: 5rem;
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
--margin:3rem;
|
||||
.content_body_recommend_right{
|
||||
right: 0;
|
||||
.content_body_img1{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 10rem;
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img2{
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
object-fit: cover;
|
||||
top: calc(30rem + var(--margin));
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img3{
|
||||
top: 38rem;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
object-fit: cover;
|
||||
right: calc(-13rem + var(--margin));
|
||||
}
|
||||
.content_body_img4{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 51rem;
|
||||
right: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img5{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 15rem;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.content_body_recommend_left{
|
||||
left: 0;
|
||||
.content_body_img1{
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
object-fit: cover;
|
||||
top: 5rem;
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img2{
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
object-fit: cover;
|
||||
top: calc(20rem + var(--margin));
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img3{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: calc(10rem + var(--margin));
|
||||
// left: calc(0 + var(--margin));
|
||||
}
|
||||
.content_body_img4{
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
object-fit: cover;
|
||||
top: 36rem;
|
||||
left: calc(-13rem + var(--margin));
|
||||
}
|
||||
.content_body_img5{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 51rem;
|
||||
left: calc(20rem + var(--margin));
|
||||
}
|
||||
.content_body_img6{
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
object-fit: cover;
|
||||
top: 20rem;
|
||||
left: calc(0 + var(--margin));
|
||||
}
|
||||
}
|
||||
.content_body_recommend_center{
|
||||
padding: 20rem 0;
|
||||
text-align: center;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
@media (max-width: 768px) {
|
||||
width: 80%;
|
||||
}
|
||||
.content_body_recommend_center_title{
|
||||
h1{
|
||||
line-height: 1;
|
||||
font-size: 13rem;
|
||||
font-weight: 900;
|
||||
margin: 7rem;
|
||||
div{
|
||||
color: #341e57;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
line-height: 1;
|
||||
margin: 7rem;
|
||||
font-size: 5rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
.content_body_recommend_center_btn{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -439,6 +412,36 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_body_recommend_content{
|
||||
align-items: center;
|
||||
@media (max-width: 768px) {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.content_body_recommend_content_right{
|
||||
font-family: 'pixel';
|
||||
font-size: 15rem;
|
||||
background: linear-gradient(90deg, #be5865, #39215b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
line-height: 1;
|
||||
i{
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_body_recommend_bottom{
|
||||
text-align: right;
|
||||
div{
|
||||
padding: 0 1rem;
|
||||
display: inline-block;
|
||||
background: #000000;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.homeRecommend_content_adminTop{
|
||||
@@ -454,7 +457,9 @@ export default defineComponent({
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
z-index: 999;
|
||||
z-index: 0;
|
||||
transition: all .3s;
|
||||
opacity: 0;
|
||||
i{
|
||||
display: flex;
|
||||
font-size: 3rem;
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
<div v-show="isScroll" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div v-show="!isScroll" class="modal_title_text_assistant active">All</div>
|
||||
<!-- <div v-show="!isScroll" class="modal_title_text_assistant active">All</div> -->
|
||||
|
||||
<!-- <div class="modal_search_menu">
|
||||
<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
|
||||
</div> -->
|
||||
@@ -328,6 +329,14 @@ export default defineComponent({
|
||||
&.otherUsersActive{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page_loading_box{
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
.page_loading{
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user