删除无用组件
This commit is contained in:
谢宇宁
@@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div class="officialPopup">
|
||||
<van-popup v-model:show="state.isRewardShow" :style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }">
|
||||
<div class="popupBox">
|
||||
<!-- <div class="listbox potato" v-if="state.potato">
|
||||
<p>官方POTATO</p>
|
||||
</div> -->
|
||||
<div class="listbox">
|
||||
<!-- <p>TG:@phub001</p> -->
|
||||
<p>TG: @ShangWuhXiao2Ge</p>
|
||||
</div>
|
||||
<div class="btnBox flex-center-center">
|
||||
<div class="btn" @click="state.isRewardShow = false">取消</div>
|
||||
<div class="btn BindBtn" @click="toTg">联系我们</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import { useConfigStore } from '@/stores/config';
|
||||
|
||||
const configStore = useConfigStore();
|
||||
const state = reactive({
|
||||
telegram: 'https://t.me/ShangWuhXiao2Ge',
|
||||
potato: '',
|
||||
isRewardShow: false,
|
||||
});
|
||||
|
||||
const init = async () => {
|
||||
// state.telegram = configStore.sourceInfo.TELEGRAM;
|
||||
state.potato = configStore.sourceInfo.GROUP;
|
||||
};
|
||||
init();
|
||||
|
||||
const toTg = () => {
|
||||
if (state.telegram) {
|
||||
window.open(state.telegram);
|
||||
}
|
||||
};
|
||||
|
||||
const openPop = () => {
|
||||
state.isRewardShow = true;
|
||||
};
|
||||
defineExpose({
|
||||
openPop,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.officialPopup {
|
||||
background-color: rgba(255, 255, 255);
|
||||
.popupBox {
|
||||
background: rgba(255, 255, 255);
|
||||
border-radius: 6px;
|
||||
height: 136px;
|
||||
width: 311px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.listbox {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 70px;
|
||||
padding: 0 15px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20px;
|
||||
p {
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btnBox {
|
||||
margin: 0 auto;
|
||||
.btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
border-top: 0.5px solid rgba(231, 231, 231, 1);
|
||||
}
|
||||
.BindBtn {
|
||||
color: $themeColor;
|
||||
border-left: 0.5px solid rgba(231, 231, 231, 1);
|
||||
}
|
||||
}
|
||||
:deep(.van-popup) {
|
||||
border-radius: 12px;
|
||||
}
|
||||
:deep(.van-overlay) {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+1
-10
@@ -4,7 +4,6 @@ import pcRouter from './pcRouter';
|
||||
import mobileRouter from './mobileRouter';
|
||||
import MobilePrivacyPolicy from '@/views/mobile/privacyPolicy/index.vue';
|
||||
import MobileSearch from '@/views/mobile/mobileSearch/index.vue';
|
||||
import Polymerization from '@/views/polymerization/index.vue';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
@@ -121,14 +120,6 @@ const routes: RouteRecordRaw[] = [
|
||||
title: '历史记录',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/polymerization',
|
||||
name: 'polymerization',
|
||||
component: Polymerization,
|
||||
meta: {
|
||||
title: '聚合下载',
|
||||
},
|
||||
},
|
||||
];
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@@ -140,7 +131,7 @@ router.beforeEach((to, from, next) => {
|
||||
home && home.scrollTo(0, 0);
|
||||
document.title = '蛋黄派-' + to.meta.title;
|
||||
const token = localStorage.getItem('token');
|
||||
if (token || to.path === '/home' || to.path === '/polymerization') {
|
||||
if (token || to.path === '/home') {
|
||||
next();
|
||||
} else {
|
||||
next('/home');
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<van-notice-bar
|
||||
class="homeNotice"
|
||||
scrollable
|
||||
background="#2B2C2E"
|
||||
background="#000"
|
||||
color="#FFF"
|
||||
:speed="60"
|
||||
v-if="state.announceText && state.announceText.length"
|
||||
@@ -23,12 +23,12 @@
|
||||
<div class="videoList">
|
||||
<MobileVideoBox :videoInfo="i" v-for="i in item.allVideoInfo" :key="i.id" />
|
||||
</div>
|
||||
<AdvBanner
|
||||
class="advBanner"
|
||||
:advInfo="state.advList[index % state.advList.length]"
|
||||
:key="state.advList[index % state.advList.length]"
|
||||
v-if="state.advList.length"
|
||||
/>
|
||||
<div class="advIconList" v-if="state.advList.length">
|
||||
<div class="advIconItem" v-for="(adv, i) in getSectionAdvs(index)" :key="i" @click="jumpAdv(adv)">
|
||||
<lazyImg class="advIcon" :src="adv.cover" />
|
||||
<div class="advName">{{ adv.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <AdvBanner class="advBanner" :advInfo="i" v-for="i in state.advList" :key="i.id" /> -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -39,6 +39,7 @@ import { reactive, computed } from 'vue';
|
||||
import { useGlobalStore } from '@/stores/global';
|
||||
import { AdType } from '@/enums/app';
|
||||
import { getAdItem } from '@/utils/getConfig';
|
||||
import { jumpAdv } from '@/utils/index';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import HomeApi from '@/service/home';
|
||||
const route = useRoute();
|
||||
@@ -103,6 +104,13 @@ const jumpTopic = (item: any) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 每个专区展示 ADV_ICON_COUNT 个小图标广告，广告不足时循环补齐
|
||||
const ADV_ICON_COUNT = 5;
|
||||
const getSectionAdvs = (sectionIndex: number) => {
|
||||
const len = state.advList.length;
|
||||
return Array.from({ length: ADV_ICON_COUNT }, (_, i) => state.advList[(sectionIndex * ADV_ICON_COUNT + i) % len]);
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
state.advList = getAdItem(AdType.MOBILEHOMETOPIC);
|
||||
queryList();
|
||||
@@ -172,13 +180,29 @@ init();
|
||||
grid-row-gap: 16px;
|
||||
grid-column-gap: 12px;
|
||||
}
|
||||
.advBanner {
|
||||
.advIconList {
|
||||
margin-top: 24px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 67px;
|
||||
:deep(img) {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.advIconItem {
|
||||
width: 60px;
|
||||
.advIcon {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.advName {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,113 +0,0 @@
|
||||
<template>
|
||||
<div class="img-decypt">
|
||||
<van-image :src="decyImg" class="vanImage" fit="cover" :round="round" @load="emit('load')" @error="emit('error')">
|
||||
<template v-slot:loading>
|
||||
<div class="loading" v-if="!isSplash" />
|
||||
<div class="splash-loading-img" v-else></div>
|
||||
</template>
|
||||
<template v-slot:error>
|
||||
<div class="loading" v-if="!isSplash" />
|
||||
<div class="splash-error-img" v-else></div>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</van-image>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Image as VanImage } from 'vant';
|
||||
import { ref } from 'vue';
|
||||
import AppApi from '@/service/app';
|
||||
const props = defineProps({
|
||||
//图片地址
|
||||
src: {
|
||||
type: String,
|
||||
required: true,
|
||||
default() {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
baseUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
default() {
|
||||
return 'https://dkatmweejckwm.cloudfront.net';
|
||||
},
|
||||
},
|
||||
isSplash: {
|
||||
//是否来自启动页
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default() {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
round: {
|
||||
//图片是否显示为圆形
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default() {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
});
|
||||
let decyImg = ref('');
|
||||
const emit = defineEmits(['load', 'error']);
|
||||
|
||||
const init = () => {
|
||||
if (!props.src) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const imgSrc = props.baseUrl + '/' + props.src
|
||||
AppApi.imgDecypt(imgSrc)
|
||||
.then((url: any) => {
|
||||
decyImg.value = url;
|
||||
})
|
||||
.catch(() => {
|
||||
emit('error');
|
||||
});
|
||||
} catch (error) {
|
||||
emit('error');
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.van-image__loading) {
|
||||
// background-color: #2d2d2d !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.splash-loading-img,
|
||||
.splash-error-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('../../assets/images/png/splash.webp') no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-decypt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.vanImage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #2d2d2d !important;
|
||||
|
||||
.loading {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.van-image__error) {
|
||||
// background-color: #2d2d2d !important;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
import { getDevType } from '@/utils';
|
||||
export default function jumpAdvClick(item: any) {
|
||||
window.open(item.url);
|
||||
fetch('https://dhpht.cestalt.com/api/app/recreation/click',{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: item.id,
|
||||
sysType: getDevType(),
|
||||
type: item.type
|
||||
}),
|
||||
}).then((response) => response.json())
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB |
@@ -1,359 +0,0 @@
|
||||
<template>
|
||||
<div id="polymerization">
|
||||
<div class="box0">
|
||||
<div class="contactOfficial" @click="tolinkUrl">联系官方</div>
|
||||
<div class="adv-box0">
|
||||
<div class="slid-list slid-list1" :style="{ '--slid-size': 5 }">
|
||||
<MyDecryptImg
|
||||
class="cover"
|
||||
:baseUrl="state.baseImgUrl"
|
||||
:src="item.icon"
|
||||
v-for="(item, index) in state.smallSqureSlide"
|
||||
:key="index"
|
||||
@click="jumpAdvClick(item)"
|
||||
/>
|
||||
</div>
|
||||
<div class="slid-list slid-list2">
|
||||
<MyDecryptImg
|
||||
class="cover"
|
||||
:baseUrl="state.baseImgUrl"
|
||||
:src="item.icon"
|
||||
v-for="(item, index) in state.smallSqureSlide2"
|
||||
:key="index"
|
||||
@click="jumpAdvClick(item)"
|
||||
/>
|
||||
</div>
|
||||
<div class="slid-list slid-list3">
|
||||
<MyDecryptImg
|
||||
class="cover"
|
||||
:baseUrl="state.baseImgUrl"
|
||||
:src="item.icon"
|
||||
v-for="(item, index) in state.smallSqureSlide3"
|
||||
:key="index"
|
||||
@click="jumpAdvClick(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-box"></div>
|
||||
<div class="swiper-list">
|
||||
<swiper :modules="[Pagination, FreeMode]" loop free-mode :slides-per-view="1.5" :space-between="15">
|
||||
<swiper-slide v-for="(item, index) in state.verticalSlide" :key="index">
|
||||
<div class="card-item" @click="jumpAdvClick(item)">
|
||||
<MyDecryptImg class="cover" :baseUrl="state.baseImgUrl" :src="item.icon" />
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box1">
|
||||
<div class="title">蛋黄派推荐🔥🔥🔥</div>
|
||||
<div class="download-box" v-for="(item, index) in state.hengOneUP" :key="index" @click="jumpAdvClick(item)">
|
||||
<MyDecryptImg class="cover" :baseUrl="state.baseImgUrl" :src="item.icon" />
|
||||
<div class="introduced">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="btn">下载</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box2">
|
||||
<div class="title">精品推荐😍😍😍</div>
|
||||
<div class="box2-list">
|
||||
<div class="box2-item" v-for="(item, index) in state.hengTwoUp" :key="index" @click="jumpAdvClick(item)">
|
||||
<MyDecryptImg class="cover" :baseUrl="state.baseImgUrl" :src="item.icon" />
|
||||
<div class="introduced">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box1">
|
||||
<div class="title">精品老牌💦💦💦</div>
|
||||
<div class="download-box" v-for="(item, index) in state.hengOneDown" :key="index" @click="jumpAdvClick(item)">
|
||||
<MyDecryptImg class="cover" :baseUrl="state.baseImgUrl" :src="item.icon" />
|
||||
<div class="introduced">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<div class="btn">下载</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box4">
|
||||
<div class="title">最新上线🥳🥳🥳</div>
|
||||
<div class="box4-list">
|
||||
<div class="box4-item" v-for="(item, index) in state.hengFour" :key="index" @click="jumpAdvClick(item)">
|
||||
<MyDecryptImg class="cover" :src="item.icon" :baseUrl="state.baseImgUrl" :key="item.icon + index" />
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="btn">下载</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import MyDecryptImg from './MyDecryptImg/index.vue'
|
||||
import { Pagination, FreeMode } from 'swiper';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import 'swiper/swiper.min.css';
|
||||
import { reactive } from 'vue';
|
||||
import jumpAdvClick from './advClick'
|
||||
|
||||
const state = reactive({
|
||||
hengOneUP: [],
|
||||
hengTwoUp: [],
|
||||
hengTwoDown: [],
|
||||
hengOneDown: [],
|
||||
hengFour: [],
|
||||
smallSqureSlide: [],
|
||||
smallSqureSlide2: [],
|
||||
smallSqureSlide3: [],
|
||||
verticalSlide: [],
|
||||
baseImgUrl: ''
|
||||
});
|
||||
fetch('https://dhpht.cestalt.com/api/app/recreation/list_v2').then((response) => response.json()).then((res: any) => {
|
||||
const resdata = res.data.list
|
||||
const obj = resdata.find((item: any) => item.name === '聚合下载') || {};
|
||||
const data = obj.comboList || [];
|
||||
state.hengOneUP = data.find((item: any) => item.displayType === 'hengOneUP').list;
|
||||
state.hengTwoUp = data.find((item: any) => item.displayType === 'hengTwoUp').list;
|
||||
state.hengTwoDown = data.find((item: any) => item.displayType === 'hengTwoDown').list;
|
||||
state.hengOneDown = data.find((item: any) => item.displayType === 'hengOneDown').list;
|
||||
state.hengFour = data.find((item: any) => item.displayType === 'hengFour').list;
|
||||
state.verticalSlide = data.find((item: any) => item.displayType === 'verticalSlide').list;
|
||||
state.smallSqureSlide = data.find((item: any) => item.displayType === 'smallSqureSlide').list;
|
||||
state.smallSqureSlide2 = data.find((item: any) => item.displayType === 'smallSqureSlide2').list;
|
||||
state.smallSqureSlide3 = data.find((item: any) => item.displayType === 'smallSqureSlide3').list;
|
||||
state.baseImgUrl = res.data.imgUrl?.domain[0]?.url
|
||||
});
|
||||
|
||||
const tolinkUrl = () => {
|
||||
window.open('https://t.me/gfqunzhu')
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#polymerization {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
height: 100vh;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
padding-bottom: 18px;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.box0 {
|
||||
width: 100%;
|
||||
height: 980px;
|
||||
background: url('./bg.jpg') no-repeat center;
|
||||
background-size: 100%;
|
||||
position: relative;
|
||||
.contactOfficial {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 41px;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
width: 82px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
border: 2px solid #000;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
@include flexCenter;
|
||||
}
|
||||
.adv-box0 {
|
||||
padding-top: 188px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slid-list {
|
||||
display: flex;
|
||||
padding-bottom: 9px;
|
||||
padding-left: 20px;
|
||||
width: max-content;
|
||||
.cover {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-right: 9px;
|
||||
}
|
||||
}
|
||||
.slid-list1 {
|
||||
animation: slide 50s linear infinite;
|
||||
}
|
||||
.slid-list2 {
|
||||
animation: slide 50s linear alternate-reverse infinite;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
.slid-list3 {
|
||||
animation: slide 50s linear infinite;
|
||||
}
|
||||
.text-box {
|
||||
width: 299px;
|
||||
height: 105px;
|
||||
background: url('./text.png') no-repeat center;
|
||||
background-size: 100%;
|
||||
margin: 30px auto;
|
||||
}
|
||||
.swiper-list {
|
||||
.card-item {
|
||||
width: 248px;
|
||||
height: 306px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box1 {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.download-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
.cover {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.introduced {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
flex: 1;
|
||||
.desc {
|
||||
color: #555664;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 72px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(270deg, rgba(255, 195, 3, 0.2) 0%, rgba(255, 221, 1, 0.2) 100%);
|
||||
color: #ffb420;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.line {
|
||||
width: 261px;
|
||||
height: 1px;
|
||||
background: rgba(198, 198, 200, 0.5);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.box2 {
|
||||
padding: 0 18px;
|
||||
|
||||
.box2-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 11px 16px;
|
||||
}
|
||||
.box2-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 160px;
|
||||
height: 64px;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(198, 198, 200, 0.5);
|
||||
.cover {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.introduced {
|
||||
.name {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
}
|
||||
.desc {
|
||||
color: #999aa2;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box4 {
|
||||
padding: 0 20px;
|
||||
padding-bottom: 50px;
|
||||
.box4-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 26px 9px;
|
||||
.box4-item {
|
||||
width: 76px;
|
||||
text-align: center;
|
||||
.cover {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.name {
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.btn {
|
||||
width: 72px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(270deg, rgba(255, 195, 3, 0.2) 0%, rgba(255, 221, 1, 0.2) 100%);
|
||||
color: #ffb420;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 关键帧动画 */
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Reference in New Issue
Block a user