1002 lines
23 KiB
Vue
1002 lines
23 KiB
Vue
<template>
|
||
<view style="padding-bottom: 20rpx;">
|
||
<view class="swipers">
|
||
<!-- 搜索 -->
|
||
<view class="centers-search flex align-center justify-center">
|
||
<view @click.stop="goSearch" class="centers-search-box ">
|
||
<u-search :show-action="false" placeholder="今日正在热播" v-model="keyword"></u-search>
|
||
</view>
|
||
</view>
|
||
<!-- 轮播图 -->
|
||
<swiper :indicator-dots="false" class="swiper" :autoplay="true" interval="5000" duration="500"
|
||
:circular="true">
|
||
<swiper-item v-for="(item,index) in swiperList" :key='index' @tap="goPage(item.url)">
|
||
<image :src="item.imageUrl" mode="aspectFill" style="width: 100%;height: 100%;"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 公告 -->
|
||
<view class="swipers-gg flex align-center">
|
||
<image src="../../static/images/index/ggIcon.png" mode=""></image>
|
||
<view class="swipers-gg-txt">
|
||
<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
|
||
class="swipers-gg-txt-gg">
|
||
<block v-for="(item, index) in noticeList">
|
||
<swiper-item @tap='goMsg(item.url)'>
|
||
<view class="swipers-gg-txt-gg-s">{{item.title}}</view>
|
||
</swiper-item>
|
||
</block>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 搜索/金刚区 -->
|
||
<view class="centers">
|
||
<view v-if="homeTypeSel != '否'">
|
||
<scroll-view scroll-x class="nav selectTop" style="height: 110upx;" scroll-with-animation>
|
||
<view style="height: 60upx;line-height: 60upx;text-align: center;" class="cu-item"
|
||
:class="index1 == TabCur ? 'text-green cur' : ''" v-for="(item, index1) in typeList"
|
||
:key="index1" @tap="typeSel(index1)" :data-id="index1">
|
||
<view :style="
|
||
index1 == TabCur
|
||
? 'margin-right: 10upx;color: #5173F8;font-size:30upx;display: flex;flex-direction: column;font-weight: bold;'
|
||
: 'background: transparent;color: #999999;margin-right: 20upx;font-size:30upx;'
|
||
">
|
||
{{ item.classificationName }}
|
||
<image v-if="index1 == TabCur"
|
||
src="https://duanjugj.xianmxkj.com/file/uploadPath/2024/02/29/ff01d4f7d4035200cb1889080dfd1ab2.png"
|
||
style="width: 50upx;height: 15upx;margin: 0 auto;"></image>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 金刚区 -->
|
||
<view class="centers-cistrict flex align-center justify-center" v-if="TabCur == 0 && gridList.length > 0">
|
||
<view class="centers-cistrict-box">
|
||
<swiper :indicator-dots="false" class="centers-cistrict-boxs" :autoplay="false" :interval="3000"
|
||
:duration="300">
|
||
<swiper-item v-for="(item,index) in gridList" :key="index">
|
||
<view class="swiper-item flex align-center justify-between">
|
||
<view class="swiper-item-s" @click="goGridList(ite)" v-for="(ite,ind) in item.child"
|
||
:key="ind">
|
||
<view class="swiper-item-s-img">
|
||
<image :src="ite.imageUrl" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="swiper-item-s-txt">
|
||
{{ite.name}}
|
||
</view>
|
||
</view>
|
||
<block v-if="item.child.length == 2">
|
||
<view class="swiper-item-s" style="height: 0;"></view>
|
||
<view class="swiper-item-s" style="height: 0;"></view>
|
||
<view class="swiper-item-s" style="height: 0;"></view>
|
||
</block>
|
||
<block v-if="item.child.length == 3">
|
||
<view class="swiper-item-s" style="height: 0;"></view>
|
||
<view class="swiper-item-s" style="height: 0;"></view>
|
||
</block>
|
||
<block v-if="item.child.length == 4">
|
||
<view class="swiper-item-s" style="height: 0;"></view>
|
||
</block>
|
||
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- tabs -->
|
||
<view class="tabs flex align-center justify-center">
|
||
<view class="tabs-box flex align-center">
|
||
<view class="tabs-box-item" @click="selectTabs(index)" :class="current == index?'tabsActive':''"
|
||
v-for="(item,index) in tabsList" :key="index">
|
||
{{item.name}}
|
||
<view class="tabs-box-item-line" v-if="current == index"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 视频列表 -->
|
||
<videoList @success="posterSuccess" :list="courseList" />
|
||
<u-loadmore v-if="courseList.length > 0" :status="status" />
|
||
<empty v-if="courseList.length == 0" />
|
||
<uni-popup ref="popusAuthorization" type="center" :maskClick="false">
|
||
<view class="contentview">
|
||
<view class="title">隐私保护指引</view>
|
||
<view class="des" @click="openPrivacyContract">
|
||
在使用当前小程序服务之前，请仔细阅读<text
|
||
style="color: #5074FF;">{{privacyContractName}}</text>。如你同意{{privacyContractName}}，请点击“同意”开始使用。
|
||
</view>
|
||
<view class="btns">
|
||
<button class="item reject" @click="exitMiniProgram">拒绝</button>
|
||
<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
|
||
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 会员助力 -->
|
||
<u-popup v-model="showjl" :closeable="true" close-icon-color="#ffffff" mode="center">
|
||
<view class="zl" @click="goZl()">
|
||
<image class="zl-bg"
|
||
src="https://duanju.xianmxkj.com/file/uploadPath/2023/12/14/adf37beca97826d44970d20118f88e29.png"
|
||
mode=""></image>
|
||
<view class="zl-title">
|
||
会员免费领
|
||
</view>
|
||
<view class="zl-titlef">
|
||
免费领会员
|
||
</view>
|
||
<view class="zl-titlef2">
|
||
助力中...
|
||
</view>
|
||
<view class="zl-titlebtn">
|
||
立即领取
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 新人红包 -->
|
||
<u-popup v-model="xxPopu" :closeable="false" close-icon-color="#ffffff" mode="center">
|
||
<view class="zl" style="height: 580rpx;" @click="saveNewUser()">
|
||
<image class="zl-bgs"
|
||
src="https://duanju.xianmxkj.com/file/uploadPath/2024/02/22/cee2fcdc4c4ebe31ab4ce2c3c3a3d183.png"
|
||
mode=""></image>
|
||
<view class="zl-titles">
|
||
{{xxJDNum}} <text>金豆</text>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import empty from '../../components/empty.vue'
|
||
import videoList from '../../components/videoList/videoList.vue'
|
||
export default {
|
||
components: {
|
||
videoList,
|
||
empty
|
||
},
|
||
data() {
|
||
return {
|
||
showjl: false,
|
||
status: 'loadmore',
|
||
swiperList: [], //轮播图列表
|
||
noticeList: [], //公告列表
|
||
keyword: '',
|
||
gridList: [], //获取金刚区类表
|
||
current: 0, //tabs索引
|
||
tabsList: [{
|
||
name: '本周热门',
|
||
id: 2,
|
||
},
|
||
{
|
||
name: '本周排行榜 ',
|
||
id: 1,
|
||
},
|
||
{
|
||
name: '最新热播',
|
||
id: '',
|
||
}
|
||
], //tabs列表
|
||
status: 'loadmore',
|
||
limit: 10,
|
||
page: 1,
|
||
pages: 1,
|
||
courseList: [], //视频列表
|
||
privacyContractName: '',
|
||
bgImg: '',
|
||
tuiguang: '',
|
||
qdCodeion: '', //渠道码
|
||
qdCode: '',
|
||
xxPopu: false,
|
||
xxJDNum: 0,
|
||
typeList: [],
|
||
TabCur: 0,
|
||
homeTypeSel: '否'
|
||
};
|
||
},
|
||
onShareAppMessage(res) {
|
||
return {
|
||
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
|
||
.qdCode, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.tuiguang,
|
||
imageUrl: this.bgImg
|
||
}
|
||
},
|
||
onShareTimeline(res) {
|
||
return {
|
||
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
|
||
.qdCode, //这是为了传参 onload(data){let id=data.id;}
|
||
title: this.tuiguang,
|
||
imageUrl: this.bgImg
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
console.log(options, '22222222222222222')
|
||
if (uni.getStorageSync('qdCode')) {
|
||
this.qdCode = uni.getStorageSync('qdCode')
|
||
}
|
||
// #ifdef MP-WEIXIN
|
||
let that = this
|
||
try {
|
||
wx.getPrivacySetting({
|
||
success: res => {
|
||
console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
|
||
if (res.needAuthorization) {
|
||
that.privacyContractName = res.privacyContractName;
|
||
that.$refs.popusAuthorization.open();
|
||
}
|
||
},
|
||
fail: () => {},
|
||
complete: () => {},
|
||
})
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
// #endif
|
||
this.getBgImg()
|
||
this.getTypeList();
|
||
this.invitationCode = uni.getStorageSync('invitationCode')
|
||
// #ifdef MP-WEIXIN
|
||
if (options.scene) { //这里为线上操作
|
||
//此处的二维码 page/index/index?brokerId=123
|
||
let scene = decodeURIComponent(options.scene);
|
||
scene = scene.split(',')
|
||
uni.setStorageSync('invitation', scene[0])
|
||
//小程序获取到的qdCode
|
||
if (scene[1]) {
|
||
uni.setStorageSync('qdCodeion', scene[1])
|
||
}
|
||
}
|
||
|
||
// #endif
|
||
if (options.invitation) {
|
||
uni.setStorageSync('invitation', options.invitation)
|
||
}
|
||
//设置从链接获取到的qdCode
|
||
if (options.qdCode) {
|
||
uni.setStorageSync('qdCodeion', options.qdCode)
|
||
}
|
||
if (uni.getStorageSync('token')) {
|
||
this.$Request.get('/app/common/type/813').then(res => {
|
||
if (res.code == 0 && res.data.value) {
|
||
if (res.data.value == '是') {
|
||
this.getActivity()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
onShow() {
|
||
this.getBannerList()
|
||
this.getMsg()
|
||
this.getGardList()
|
||
this.page = 1
|
||
this.getCourseList()
|
||
this.$u.get('/app/common/type/849').then(res => {
|
||
if (res.code == 0 && res.data) {
|
||
uni.setStorageSync('homeTypeSel', res.data.value)
|
||
this.homeTypeSel = this.$queue.getData('homeTypeSel') ? this.$queue.getData('homeTypeSel') :
|
||
'否';
|
||
} else {
|
||
this.homeTypeSel = this.$queue.getData('homeTypeSel') ? this.$queue.getData('homeTypeSel') :
|
||
'否';
|
||
}
|
||
});
|
||
//#ifdef H5
|
||
let that = this
|
||
this.$u.get('/app/common/type/108').then(res => { //// 是否开启公众号自动登陆 108
|
||
if (res.code == 0 && res.data) {
|
||
if (res.data.value == '是') {
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
if (ua.indexOf('micromessenger') !== -1) {
|
||
let openid = uni.getStorageSync('openId');
|
||
let userId = uni.getStorageSync('userId');
|
||
if (userId) {
|
||
if (!openid) {
|
||
if (window.location.href.indexOf('?code=') !== -1 || window.location.href
|
||
.indexOf(
|
||
'&code=') !==
|
||
-1) {
|
||
let code;
|
||
if (window.location.href.indexOf('?code=') !== -1) {
|
||
code = window.location.href.split('?code=')[1].split('&')[0];
|
||
} else {
|
||
code = window.location.href.split('&code=')[1].split('&')[0];
|
||
}
|
||
if (userId) {
|
||
that.$u.get('/app/user/openId/' + code + '/' + userId).then(
|
||
res => {
|
||
uni.setStorageSync('openId', res.data)
|
||
});
|
||
}
|
||
} else {
|
||
window.location.href =
|
||
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
|
||
that.$queue.getWxAppid() +
|
||
'&redirect_uri=' +
|
||
window.location.href.split('#')[0] +
|
||
'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
//#endif
|
||
if (uni.getStorageSync('token')) {
|
||
//新用户红包 837
|
||
this.$Request.get('/app/common/type/837').then(res => {
|
||
if (res.code == 0 && res.data.value) {
|
||
this.xxJDNum = res.data.value;
|
||
this.checkNewUser()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
if (this.page < this.pages) {
|
||
this.page += 1
|
||
this.status = 'loading'
|
||
this.getCourseList()
|
||
} else {
|
||
this.status = 'nomore'
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
this.page = 1
|
||
this.getCourseList()
|
||
},
|
||
methods: {
|
||
getTypeList() {
|
||
this.$Request.getT('/app/courseClassification/queryClassification').then(res => {
|
||
if (res.code == 0) {
|
||
let fenlei = {
|
||
classificationId: 0,
|
||
classificationName: "热门"
|
||
}
|
||
this.typeList = [];
|
||
this.typeList.push(fenlei);
|
||
res.data.forEach(d => {
|
||
this.typeList.push(d);
|
||
});
|
||
// console.log(JSON.stringify(this.typeList))
|
||
}
|
||
});
|
||
},
|
||
typeSel(index) {
|
||
this.TabCur = index;
|
||
this.page = 1
|
||
this.getCourseList()
|
||
},
|
||
checkNewUser() {
|
||
this.$u.api.userinfo().then(res => {
|
||
if (res.code == 0 && res.data) {
|
||
if (res.data.isNewUser && res.data.isNewUser == 1) {} else {
|
||
this.xxPopu = true;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
saveNewUser() {
|
||
this.$Request.postT('/app/user/getNewUserRed').then(res => {
|
||
if (res.code == 0) {
|
||
this.xxPopu = false;
|
||
this.$queue.showToast('领取成功，金豆已到账！');
|
||
} else {
|
||
this.$queue.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 获取活动等级
|
||
getActivity() {
|
||
this.$Request.getT('/app/invite/selectInviteAwardByUserId').then(res => {
|
||
if (res.code == 0) {
|
||
if (res.data) {
|
||
this.showjl = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//去助力页面
|
||
goZl() {
|
||
uni.navigateTo({
|
||
url: '/me/assistance/assistance'
|
||
})
|
||
this.showjl = false
|
||
},
|
||
// 打开隐私协议页面
|
||
openPrivacyContract() {
|
||
let that = this;
|
||
wx.openPrivacyContract({
|
||
fail: () => {
|
||
that.$queue.showToast('遇到错误无法打开！');
|
||
}
|
||
})
|
||
},
|
||
// 拒绝隐私协议
|
||
exitMiniProgram() {
|
||
// 直接退出小程序
|
||
wx.exitMiniProgram()
|
||
},
|
||
// 同意隐私协议
|
||
handleAgreePrivacyAuthorization() {
|
||
this.$refs.popusAuthorization.close();
|
||
},
|
||
//获取背景图
|
||
getBgImg() {
|
||
this.$u.get('app/banner/selectBannerList?classify=5').then(res => {
|
||
if (res.code == 0) {
|
||
this.bgImg = res.data[0].imageUrl
|
||
this.tuiguang = res.data[0].describes
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//点击回调
|
||
posterSuccess(item) {
|
||
let userId = uni.getStorageSync('userId')
|
||
if (userId) {
|
||
// uni.navigateTo({
|
||
// url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId
|
||
// })
|
||
uni.navigateTo({
|
||
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
|
||
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
|
||
.dyEpisodeId
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
// 获取资源列表
|
||
getCourseList() {
|
||
let typeId = '';
|
||
if (this.TabCur != 0) {
|
||
typeId = this.typeList[this.TabCur].classificationId;
|
||
}
|
||
let data = {
|
||
limit: this.limit,
|
||
page: this.page,
|
||
sort: this.tabsList[this.current].id,
|
||
classifyId: typeId
|
||
}
|
||
// #ifdef MP-WEIXIN
|
||
data.wxShow = 1
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
data.dyShow = 1
|
||
// #endif
|
||
this.$u.api.courseList(data).then(res => {
|
||
uni.stopPullDownRefresh()
|
||
if (res.code == 0) {
|
||
this.pages = res.data.totalPage
|
||
if (this.page < this.pages) {
|
||
this.status = 'loadmore'
|
||
} else {
|
||
this.status = 'nomore'
|
||
}
|
||
if (this.page == 1) {
|
||
this.courseList = res.data.list
|
||
} else {
|
||
this.courseList = [...this.courseList, ...res.data.list]
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
uni.stopPullDownRefresh();
|
||
|
||
})
|
||
},
|
||
//切换类型
|
||
selectTabs(index) {
|
||
this.current = index
|
||
this.page = 1
|
||
|
||
this.getCourseList()
|
||
},
|
||
// 跳转资源列表
|
||
goGridList(e) {
|
||
if (uni.getStorageSync('token')) {
|
||
uni.navigateTo({
|
||
url: e.url
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
//处理分割金刚区
|
||
processArray(arr) {
|
||
let arr2 = [];
|
||
let child = [];
|
||
for (let i = 0; i < arr.length; i++) {
|
||
child.push(arr[i]);
|
||
|
||
if (child.length === 5) {
|
||
arr2.push({
|
||
child: child
|
||
});
|
||
child = [];
|
||
}
|
||
}
|
||
// 如果arr数组的长度不是5的倍数，将剩余的元素添加到arr2数组的最后一个child中
|
||
if (child.length > 0) {
|
||
arr2.push({
|
||
child: child
|
||
});
|
||
}
|
||
|
||
return arr2;
|
||
},
|
||
// 获取金刚区列表
|
||
getGardList() {
|
||
this.$u.api.bannerList({
|
||
classify: '2',
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
let arr = []
|
||
res.data.forEach(ret => {
|
||
if (ret.state == 1) {
|
||
arr.push(ret)
|
||
}
|
||
})
|
||
this.gridList = this.processArray(arr)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 跳转搜索
|
||
goSearch() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/search/index'
|
||
});
|
||
},
|
||
// 跳转公告链接
|
||
goMsg(e) {
|
||
if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
} else {
|
||
//#ifndef H5
|
||
uni.navigateTo({
|
||
url: '/pages/index/webView?url=' + url
|
||
});
|
||
//#endif
|
||
//#ifdef H5
|
||
window.location.href = url;
|
||
//#endif
|
||
}
|
||
},
|
||
//轮播图跳转
|
||
goPage(url) {
|
||
let token = uni.getStorageSync('token')
|
||
if (token) {
|
||
if (url) {
|
||
if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
} else {
|
||
//#ifndef H5
|
||
uni.navigateTo({
|
||
url: '/pages/index/webView?url=' + url
|
||
});
|
||
//#endif
|
||
//#ifdef H5
|
||
window.location.href = url;
|
||
//#endif
|
||
}
|
||
}
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
},
|
||
// 公告
|
||
getMsg() {
|
||
let data = {
|
||
page: 1,
|
||
limit: 5,
|
||
state: 1
|
||
}
|
||
this.$u.api.msg(data).then(res => {
|
||
if (res.code == 0) {
|
||
this.notice = res.data.list
|
||
res.data.list.forEach(res => {
|
||
this.noticeList.push(res)
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 获取轮播图列表
|
||
getBannerList() {
|
||
this.$u.api.bannerList({
|
||
classify: '1'
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
res.data.forEach(d => {
|
||
if (d.state == 1) {
|
||
this.swiperList.push(d)
|
||
}
|
||
})
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F5F7FF
|
||
}
|
||
|
||
/deep/.u-mode-center-box {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.selectTop {
|
||
padding-right: 16upx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.zl {
|
||
width: 518rpx;
|
||
height: 556rpx;
|
||
position: relative;
|
||
background: transparent;
|
||
|
||
.zl-bg {
|
||
width: 518rpx;
|
||
height: 556rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.zl-bgs {
|
||
width: 518rpx;
|
||
height: 580rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.zl-title {
|
||
position: absolute;
|
||
top: 15%;
|
||
left: 46%;
|
||
transform: translate(-50%, 100%);
|
||
font-size: 44rpx;
|
||
font-weight: bold;
|
||
color: #F24364;
|
||
background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.zl-titles {
|
||
position: absolute;
|
||
top: 24%;
|
||
left: 50%;
|
||
transform: translate(-50%, 100%);
|
||
font-size: 70rpx;
|
||
font-weight: bold;
|
||
background: #FFFFFF;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.zl-titlef {
|
||
font-size: 14rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
position: absolute;
|
||
top: 41%;
|
||
right: 35%;
|
||
}
|
||
|
||
.zl-titlef2 {
|
||
font-size: 14rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
position: absolute;
|
||
top: 48%;
|
||
left: 22%;
|
||
}
|
||
|
||
.zl-titlebtn {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
background: linear-gradient(0deg, #FF5878 0.390625%, #F30931 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
position: absolute;
|
||
bottom: 10%;
|
||
left: 50%;
|
||
transform: translate(-65%, 50%);
|
||
}
|
||
}
|
||
|
||
.swipers {
|
||
width: 100%;
|
||
height: 588rpx;
|
||
position: relative;
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.centers-search {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 92rpx;
|
||
// margin-top: 20rpx;
|
||
padding-top: 20rpx;
|
||
|
||
// border-radius: 16rpx;
|
||
top: 20rpx;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
z-index: 89;
|
||
|
||
.centers-search-box {
|
||
width: 690rpx;
|
||
height: 100%;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
// background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 4rpx 14rpx 0rpx;
|
||
}
|
||
}
|
||
|
||
.swipers-gg {
|
||
position: absolute;
|
||
width: 686rpx;
|
||
height: 62rpx;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
border-radius: 16rpx;
|
||
bottom: 130rpx;
|
||
left: 50%;
|
||
transform: translate(-50%, 0);
|
||
|
||
image {
|
||
width: 92rpx;
|
||
height: 52rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.swipers-gg-txt {
|
||
width: calc(100% - 10rpx - 40rpx - 92rpx);
|
||
height: 100%;
|
||
margin-left: 10rpx;
|
||
|
||
.swipers-gg-txt-gg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.swipers-gg-txt-gg-s {
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 62rpx;
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.centers {
|
||
width: 100%;
|
||
height: auto;
|
||
background-color: #F5F7FF;
|
||
border-radius: 60rpx 60rpx 0 0;
|
||
margin-top: -100rpx;
|
||
position: relative;
|
||
|
||
.centers-search {
|
||
width: 100%;
|
||
height: 92rpx;
|
||
// margin-top: 20rpx;
|
||
padding-top: 20rpx;
|
||
|
||
.centers-search-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 46rpx;
|
||
padding: 0 24rpx;
|
||
}
|
||
}
|
||
|
||
.centers-cistrict {
|
||
width: 100%;
|
||
height: 216rpx;
|
||
// margin-top: 24rpx;
|
||
|
||
.centers-cistrict-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
// background-color: #ffffff;
|
||
// border-radius: 24rpx;
|
||
|
||
}
|
||
|
||
.centers-cistrict-boxs {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.swiper-item {
|
||
width: 100%;
|
||
height: 125rpx;
|
||
margin-top: 30rpx;
|
||
// padding: 0 20rpx;
|
||
}
|
||
|
||
.swiper-item-s {
|
||
width: calc(100% / 5 - 30rpx);
|
||
height: 100%;
|
||
}
|
||
|
||
.swiper-item-s-img {
|
||
width: 94rpx;
|
||
height: 94rpx;
|
||
margin: 0 auto;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 94rpx;
|
||
}
|
||
}
|
||
|
||
.swiper-item-s-txt {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 10rpx;
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
width: 100%;
|
||
height: auto;
|
||
// margin-top: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.tabs-box {
|
||
width: 686rpx;
|
||
}
|
||
|
||
.tabs-box-item {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
margin-right: 50rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.tabs-box-item-line {
|
||
width: 30rpx;
|
||
height: 6rpx;
|
||
background-color: #5173F8;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 100%;
|
||
transform: translate(-50%, 0);
|
||
border-radius: 30rpx;
|
||
margin-top: 6rpx
|
||
}
|
||
}
|
||
|
||
.tabsActive {
|
||
color: #5173F8 !important;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.contentview {
|
||
width: 632rpx;
|
||
padding: 48rpx;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.contentview .title {
|
||
text-align: center;
|
||
color: #333;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.contentview .des {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-top: 40rpx;
|
||
text-align: justify;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.contentview .des .link {
|
||
color: #5074FF;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
|
||
.btns {
|
||
margin-top: 48rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.btns .item {
|
||
justify-content: space-between;
|
||
width: 244rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
border: none;
|
||
}
|
||
|
||
.btns .reject {
|
||
background: #f4f4f5;
|
||
color: #909399;
|
||
}
|
||
|
||
.btns .agree {
|
||
background: #5074FF;
|
||
color: #ffffff;
|
||
}
|
||
</style> |