577 lines
14 KiB
Vue
577 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="mobile-home">
|
|||
|
|
<!-- #ifdef APP -->
|
|||
|
|
<view class="app-top" :style="{ height: CustomBar+2+'rpx',
|
|||
|
|
background: topLevel===0? 'linear-gradient(180deg, #d8fa35 0%, #f0fdbf 100%)' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
|||
|
|
<view :style="{ height: CustomBar+'rpx',background: 'linear-gradient(180deg, #d8fa35 0%, #f0fdbf 100%)'}"></view>
|
|||
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`,marginTop: CustomBar+2+'rpx'}">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef APP -->
|
|||
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<image :src="fileUrl+logo"></image>
|
|||
|
|
</view>
|
|||
|
|
<u-swiper height="420" :list="swiperList" name="picture" circular></u-swiper>
|
|||
|
|
<view class="mobile-content">
|
|||
|
|
<view class="content-inner">
|
|||
|
|
<!-- 功能栏 -->
|
|||
|
|
<view class="first-functions">
|
|||
|
|
<view class="ff-left">
|
|||
|
|
<image :src="fileUrl+functionImg[0].picture"></image>
|
|||
|
|
<image :src="fileUrl+functionImg[1].picture" class="go"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="ff-right">
|
|||
|
|
<image @click="toDeal({name: '涂抹重绘',model: 'repaint'})" class="redraw" :src="fileUrl+functionImg[2].picture"></image>
|
|||
|
|
<image class="tip" :src="fileUrl+functionImg[3].picture"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 轮播功能栏 -->
|
|||
|
|
<view class="second-functions">
|
|||
|
|
<swiper class="swiper" duration="300" @change="categoryChange">
|
|||
|
|
<swiper-item v-for="(item, index) in swiperFunctionList" :key="item.picture">
|
|||
|
|
<view class="category flex" :style="item.length===5?{justifyContent: 'space-between'}:{}">
|
|||
|
|
<template v-for="(category, itemIndex) in item">
|
|||
|
|
<view class="category-item" @click="toDeal(category)">
|
|||
|
|
<image :style="category.name==='人物动漫化'?{width:'115rpx'}:category.name==='证件照'?{width:'85rpx'}:{}" :src="fileUrl+category.picture"></image>
|
|||
|
|
{{ category.name }}
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
<view class="dots">
|
|||
|
|
<view v-for="item in swiperFunctionList.length" :key="item"
|
|||
|
|
:class="{ active: item === currentPageindex }"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 推荐作品 -->
|
|||
|
|
<view class="third-functions">
|
|||
|
|
<view class="tf-control">
|
|||
|
|
<image :src="fileUrl+recommendImg"></image>
|
|||
|
|
<view class="tfc-right">
|
|||
|
|
筛选
|
|||
|
|
<view class="tfcr-btn" @click="showSift = true">
|
|||
|
|
<u-icon :label="siftList[siftIndex].label" :name="fileUrl+select" color="#d4ff00"
|
|||
|
|
size="17" label-pos="left" label-color="#d4ff00"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="show-work">
|
|||
|
|
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in workList" :key="item.id">
|
|||
|
|
<view :class="item.display?'ribbon-fadeOutUp':''" class="collect-ribbon" v-show="item.collect">收藏</view>
|
|||
|
|
<image class="work-picture" :src="item.picture" mode="widthFix"></image>
|
|||
|
|
<view class="sign-text">{{ siftList[item.type].label }}</view>
|
|||
|
|
<image class="sign" :src="fileUrl+sign"></image>
|
|||
|
|
<image class="compare-sign" mode="widthFix" :src="item.compare"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 下面这里等后端有了之后，用isFinish判断 -->
|
|||
|
|
<view class="last-tip">
|
|||
|
|
~~ 已加载全部 ~~
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<!-- 筛选项下拉栏 -->
|
|||
|
|
<u-select v-model="showSift" :list="siftList" @confirm="selectSift"
|
|||
|
|
confirm-color="#94d500"></u-select>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import configService from '@/common/config.service.js';
|
|||
|
|
import { tools } from '@/utils/utils.js';
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
topLevel:{
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
siftList:{
|
|||
|
|
type: Array,
|
|||
|
|
default: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
fileUrl: configService.fileUrl + 'pixel/home/',
|
|||
|
|
// logo图标
|
|||
|
|
logo: 'logo.png',
|
|||
|
|
// 第一层功能图片
|
|||
|
|
functionImg:[
|
|||
|
|
{
|
|||
|
|
// ai换装
|
|||
|
|
picture: 'dressup.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
// ai换装-go
|
|||
|
|
picture: 'dressupgo.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
// 涂抹重绘
|
|||
|
|
picture: 'redraw.png'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
// 涂抹重绘提示词
|
|||
|
|
picture: 'redrawtip.png'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
// 横向工具栏
|
|||
|
|
swiperFunctionList:[
|
|||
|
|
[
|
|||
|
|
// {
|
|||
|
|
// // 风格替换
|
|||
|
|
// name: '风格替换',
|
|||
|
|
// picture:'autoreplace.png',
|
|||
|
|
// model: '',
|
|||
|
|
// // 'stylereplace'
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
// 人物动漫化
|
|||
|
|
name: '人物动漫化',
|
|||
|
|
picture:'save.png',
|
|||
|
|
model: 'animeization'
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// // 证件照
|
|||
|
|
// name: '证件照',
|
|||
|
|
// picture:'passport.png',
|
|||
|
|
// model: ''
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
// 旧照修复
|
|||
|
|
name: '旧照修复',
|
|||
|
|
picture:'oldrepair.png',
|
|||
|
|
model: 'oldrepair'
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// // 人脸修复
|
|||
|
|
// name: '人脸修复',
|
|||
|
|
// picture:'headrepair.png',
|
|||
|
|
// model: ''
|
|||
|
|
// }
|
|||
|
|
],
|
|||
|
|
// []
|
|||
|
|
],
|
|||
|
|
// 当前横向工具栏页码
|
|||
|
|
currentPageindex: 1,
|
|||
|
|
// 轮播图
|
|||
|
|
swiperList:[
|
|||
|
|
{
|
|||
|
|
picture: configService.fileUrl + 'pixel/home/banner.png',
|
|||
|
|
path: ''
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
picture: configService.fileUrl + 'pixel/home/banner.png',
|
|||
|
|
path: ''
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
// 推荐作品图标
|
|||
|
|
recommendImg: 'recommend.png',
|
|||
|
|
// 筛选下拉栏三角形
|
|||
|
|
select: 'select.png',
|
|||
|
|
// 展示筛选项
|
|||
|
|
showSift: false,
|
|||
|
|
// 筛选项下标
|
|||
|
|
siftIndex: 0,
|
|||
|
|
// 推荐作品列表
|
|||
|
|
workList:[
|
|||
|
|
{
|
|||
|
|
id: 1,
|
|||
|
|
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/af29f44ad5abf333f52f7a0e9dd65260.png',
|
|||
|
|
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/1b6ef6597fd59c8af1b50dc2658f431e.jpg',
|
|||
|
|
type: 1,
|
|||
|
|
collect: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 2,
|
|||
|
|
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e6aa2563a3a58064b9d5144be60f6320.png',
|
|||
|
|
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/f1f0a1a6c08a026d90f396294b57f96b.png',
|
|||
|
|
type: 7,
|
|||
|
|
collect: 1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 3,
|
|||
|
|
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ccbd6422e3b8776d1b2ae2a37b22bd45.png',
|
|||
|
|
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ab95c3bf9c95876cfaed68a15bbf0b72.png',
|
|||
|
|
type: 7,
|
|||
|
|
collect: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 4,
|
|||
|
|
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/39accf84409cb5b8b71b6a039792aaac.png',
|
|||
|
|
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/bb3242fa17a79fd4f9b8597761f1f168.png',
|
|||
|
|
type: 6,
|
|||
|
|
collect: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 5,
|
|||
|
|
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/31689612c754f8e1fda031a654f9cc2.png',
|
|||
|
|
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/3fc992cfbd3827719b984d5b2008d354.png',
|
|||
|
|
type: 2,
|
|||
|
|
collect: 0
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 6,
|
|||
|
|
picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e03df2fa9aede0b76530afca14e45c3b.png',
|
|||
|
|
compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e7909151044c9343a9a9b643b85883c9.jpg',
|
|||
|
|
type: 4,
|
|||
|
|
collect: 1
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
// 标签图标
|
|||
|
|
sign: 'typelam.png',
|
|||
|
|
// 点击次数
|
|||
|
|
touchNum : 0,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 横向功能列表切换页
|
|||
|
|
categoryChange(event){
|
|||
|
|
this.currentPageindex = event.detail.current+1;
|
|||
|
|
},
|
|||
|
|
// 推荐作品筛选
|
|||
|
|
selectSift(e){
|
|||
|
|
this.siftIndex = e[0].value;
|
|||
|
|
},
|
|||
|
|
// 监听单双击，单击-预览图片、双击-收藏
|
|||
|
|
maskTouchend(item,index){
|
|||
|
|
this.touchNum ++;
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
if(this.touchNum == 1){
|
|||
|
|
tools.methods.lookImage(0,[item.picture,item.compare]);
|
|||
|
|
}
|
|||
|
|
if(this.touchNum >= 2){
|
|||
|
|
const result = (item.collect+1)%2;
|
|||
|
|
if(result === 0){
|
|||
|
|
// 添加淡出的class样式
|
|||
|
|
item.display = 1;
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
// 下面的操作应该替换为请求后端数据后，再停止动画
|
|||
|
|
// 模拟操作，这里用setTimeout模拟
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 移除淡出类
|
|||
|
|
item.display = 0;
|
|||
|
|
item.collect = result;
|
|||
|
|
}, 1000); // 假设操作需要1秒
|
|||
|
|
}else{
|
|||
|
|
item.collect = result;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.touchNum = 0;
|
|||
|
|
},250)
|
|||
|
|
},
|
|||
|
|
// 前往工作室
|
|||
|
|
toDeal({name, model}){
|
|||
|
|
if(name && model)
|
|||
|
|
uni.navigateTo({url: `/pages/mobile_web/workshops/index?name=${name}&model=${model}`});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.mobile-home{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
// #ifdef APP
|
|||
|
|
.app-top{
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 81;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
.mobile-logo{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 81;
|
|||
|
|
padding: 15rpx 0;
|
|||
|
|
image{
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 45rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.mobile-content{
|
|||
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
|||
|
|
z-index: 80;
|
|||
|
|
width: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
margin-top: -50rpx;
|
|||
|
|
border-top-right-radius: 36rpx;
|
|||
|
|
border-top-left-radius: 36rpx;
|
|||
|
|
background-color: #1a1929;
|
|||
|
|
.content-inner{
|
|||
|
|
margin: 60rpx 45rpx 150rpx;
|
|||
|
|
.first-functions{
|
|||
|
|
display: flex;
|
|||
|
|
height: 270rpx;
|
|||
|
|
.ff-left{
|
|||
|
|
width: 250rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
image{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 105%;
|
|||
|
|
&:active{
|
|||
|
|
filter: opacity(0.8);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.go{
|
|||
|
|
width: 90rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 24rpx;
|
|||
|
|
right: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.ff-right{
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 250rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
image{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 70%;
|
|||
|
|
}
|
|||
|
|
.redraw{
|
|||
|
|
margin-top: -1%;
|
|||
|
|
&:active{
|
|||
|
|
filter: opacity(0.8);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tip{
|
|||
|
|
height: 24%;
|
|||
|
|
margin-bottom: 1%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.second-functions{
|
|||
|
|
position: relative;
|
|||
|
|
height: 125rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 50rpx;
|
|||
|
|
.swiper{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
.category{
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: start;
|
|||
|
|
flex-flow: wrap;
|
|||
|
|
.category-item{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 12rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
&:active{
|
|||
|
|
filter: opacity(0.8);
|
|||
|
|
}
|
|||
|
|
image{
|
|||
|
|
width: 110rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
margin-bottom: 14rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.dots{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 14rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
view{
|
|||
|
|
background-color: #818e4f;
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 10rpx;
|
|||
|
|
margin: 0 6rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
transition: all 0.5s;
|
|||
|
|
}
|
|||
|
|
.active{
|
|||
|
|
background-color: #d5ff00 !important;
|
|||
|
|
width: 45rpx !important;
|
|||
|
|
height: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.third-functions{
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 35rpx;
|
|||
|
|
.tf-control{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 80rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
image{
|
|||
|
|
margin-left: 15rpx;
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
}
|
|||
|
|
.tfc-right{
|
|||
|
|
height: 70rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 5rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
.tfcr-btn{
|
|||
|
|
margin-left: 25rpx;
|
|||
|
|
border: 2rpx solid #d5ff00;
|
|||
|
|
border-radius: 25rpx;
|
|||
|
|
background-color: #1a1929;
|
|||
|
|
.u-icon{
|
|||
|
|
margin: 16rpx 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.show-work{
|
|||
|
|
margin-top: 13rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
column-count:2;
|
|||
|
|
-moz-column-count:2; /* Firefox */
|
|||
|
|
-webkit-column-count:2; /* Safari 和 Chrome */
|
|||
|
|
column-gap: 1em;
|
|||
|
|
-moz-column-gap: 1em;
|
|||
|
|
-webkit-column-gap: 1em;
|
|||
|
|
.work-item{
|
|||
|
|
-webkit-column-break-inside: avoid;
|
|||
|
|
break-inside: avoid; /*防止断点*/
|
|||
|
|
margin-bottom: 1em;
|
|||
|
|
position: relative;
|
|||
|
|
padding-top: 13rpx;
|
|||
|
|
.work-picture{
|
|||
|
|
border: 0.1em solid #d5ff00;
|
|||
|
|
border-radius: 30rpx;
|
|||
|
|
}
|
|||
|
|
.sign{
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 0;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0.8em;
|
|||
|
|
left: 0.6em;
|
|||
|
|
width: 142rpx;
|
|||
|
|
height: 47rpx;
|
|||
|
|
}
|
|||
|
|
.sign-text{
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0.85em;
|
|||
|
|
left: 0.9em;
|
|||
|
|
z-index: 1;
|
|||
|
|
}
|
|||
|
|
.compare-sign{
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0.2em;
|
|||
|
|
width: 120rpx;
|
|||
|
|
border: 0.1em solid #d5ff00;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-shadow: rgba(213, 255, 0, 0.3) 0px 4px 12px;
|
|||
|
|
}
|
|||
|
|
.ribbon-fadeOutUp{
|
|||
|
|
animation-name: fadeOutUp !important;
|
|||
|
|
}
|
|||
|
|
.collect-ribbon {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 2;
|
|||
|
|
margin-top: -13rpx;
|
|||
|
|
right: 30rpx;
|
|||
|
|
width: 62rpx;
|
|||
|
|
padding: 20rpx 14rpx 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #ff9900;
|
|||
|
|
font-size: 25rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
animation-name: bounceInDown;
|
|||
|
|
animation-duration: 0.5s;
|
|||
|
|
animation-fill-mode: both;
|
|||
|
|
|
|||
|
|
&::before,
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::before {
|
|||
|
|
top: 0;
|
|||
|
|
left: -10rpx;
|
|||
|
|
height: 0;
|
|||
|
|
width: 0;
|
|||
|
|
border-bottom: 14rpx solid #ff9900;
|
|||
|
|
border-left: 12rpx solid transparent;
|
|||
|
|
opacity: .8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
height: 0;
|
|||
|
|
width: 0;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: -39rpx;
|
|||
|
|
border-left: 31rpx solid #ff9900;
|
|||
|
|
border-right: 32rpx solid #ff9900;
|
|||
|
|
border-bottom: 43rpx solid transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.last-tip{
|
|||
|
|
color: #d5ff00;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
margin-bottom: 160rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .u-swiper-indicator {
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
.u-indicator-item-round-active{
|
|||
|
|
background-color: #1d1d1d !important;
|
|||
|
|
width: 45rpx !important;
|
|||
|
|
height: 10rpx;
|
|||
|
|
}
|
|||
|
|
.u-indicator-item-round{
|
|||
|
|
background-color: #818e4f;
|
|||
|
|
width: 20rpx;
|
|||
|
|
height: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 淡入
|
|||
|
|
@keyframes bounceInDown {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(0, -5%, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translate3d(0, 0, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 淡出
|
|||
|
|
@keyframes fadeOutUp {
|
|||
|
|
from {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
to {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translate3d(0, -5%, 0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|