307 lines
6.6 KiB
Vue
307 lines
6.6 KiB
Vue
<template>
|
||
<view class="container_interell">
|
||
<!-- 公告 -->
|
||
<view class="announcement-bar">
|
||
<view class="announcement-content">
|
||
<span>系統還在建設中，請敬請期待！！！</span>
|
||
</view>
|
||
</view>
|
||
<!-- banner -->
|
||
<view class="banner">
|
||
<swiper indicator-dots="true" indicator-active-color="#fff" circular="true" autoplay="true" interval="3000"
|
||
duration="500" class="swiper-container">
|
||
<swiper-item v-for="(item, index) in bannerList" :key="index">
|
||
<image :src="item.image" class="swiper-image"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- content -->
|
||
<view class="content">
|
||
<view class="content-item" v-for="item in dataList" :key="item.id">
|
||
<image :src="item.img" mode=""></image>
|
||
<view class="content-tit">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="content-btn" @click="construct(item.name)">
|
||
<view class="title">
|
||
立即使用
|
||
</view>
|
||
<view class="icon">
|
||
<u-icon name="arrow-right" color="#fff" size="7"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 彈框 -->
|
||
<view class="modal" v-if="frameval">
|
||
<view class="modal_title">
|
||
快點閱讀保護隱私條款說明
|
||
</view>
|
||
<view class="modal_text">
|
||
本《隱私條款》與《服務協議》希望向你說明:
|
||
<view class="">
|
||
1.為幫助你瀏覽內容、發佈內容與互動，我們會收集你的部分必要資訊。
|
||
</view>
|
||
<view class="">
|
||
2.為了你保存圖片和視頻到相冊，並方便瀏覽內容及節約流量，我們會申請存儲許可權。
|
||
</view>
|
||
<view class="" style="margin-bottom: 30rpx;">
|
||
3.因基礎反作弊能力的需要，協力廠商友盟+SDK需要收集您的設備Mac地址、唯一設備識別碼以提供+SDK需要收集您的設備Mac地址、唯一設備識別碼以提供
|
||
</view>
|
||
<view class="" style="margin-bottom: 30rpx;">
|
||
詳情請查看<text style="color:#4f5ad8">《服務協議》</text>與<text style="color:#4f5ad8">《隱私條款》</text>
|
||
</view>
|
||
</view>
|
||
<view class="modal_btn">
|
||
<view class="savebtn" style="background-color: #f0f0f0;" @click="agree">
|
||
不同意
|
||
</view>
|
||
<view class="savebtn" style="color: #fff;" @click="agree">
|
||
同意
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bannerList: [{
|
||
image: '../../static/swiper1.png'
|
||
},
|
||
{
|
||
image: '../../static/swiper2.png'
|
||
},
|
||
{
|
||
image: '../../static/swiper3.png'
|
||
}
|
||
],
|
||
dataList: [{
|
||
id: 1,
|
||
name: '巧築智金AI量化',
|
||
img: '../../static/aibgc1.png'
|
||
}, {
|
||
id: 2,
|
||
name: '農業AI',
|
||
img: '../../static/aibgc2.png'
|
||
}, {
|
||
id: 3,
|
||
name: '逍遙遊',
|
||
img: '../../static/aibgc3.png'
|
||
}, {
|
||
id: 4,
|
||
name: '商戰智靈',
|
||
img: '../../static/aibgc4.png'
|
||
}, {
|
||
id: 5,
|
||
name: '解鄉愁',
|
||
img: '../../static/aibgc5.png'
|
||
}, {
|
||
id: 6,
|
||
name: '星際算力雲',
|
||
img: '../../static/aibgc6.png'
|
||
}],
|
||
show: false,
|
||
frameval: false
|
||
}
|
||
},
|
||
methods: {
|
||
construct(name) {
|
||
console.log('跳轉', name)
|
||
switch (name) {
|
||
case '逍遙遊':
|
||
uni.navigateTo({
|
||
url: '/pages/game/index'
|
||
})
|
||
break;
|
||
case '巧築智金AI量化':
|
||
uni.navigateTo({
|
||
url: '/pages/smarttrading/index'
|
||
})
|
||
break;
|
||
case '星際算力雲':
|
||
uni.showToast({
|
||
title: "系統還在建設中，請敬請期待！！！",
|
||
icon: 'none'
|
||
})
|
||
break;
|
||
case '農業AI':
|
||
uni.showToast({
|
||
title: "系統還在建設中，請敬請期待！！！",
|
||
icon: 'none'
|
||
})
|
||
break;
|
||
case '商戰智靈':
|
||
uni.showToast({
|
||
title: "系統還在建設中，請敬請期待！！！",
|
||
icon: 'none'
|
||
})
|
||
break;
|
||
case '解鄉愁':
|
||
uni.showToast({
|
||
title: "系統還在建設中，請敬請期待！！！",
|
||
icon: 'none'
|
||
})
|
||
break;
|
||
}
|
||
},
|
||
agree() {
|
||
console.log('同意');
|
||
this.frameval = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
padding: 20rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.content-item {
|
||
width: 50%;
|
||
height: 200rpx;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
|
||
.content-tit {
|
||
position: absolute;
|
||
left: 45%;
|
||
top: 20%;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
}
|
||
|
||
.content-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 130rpx;
|
||
height: 40rpx;
|
||
background-color: #4F5AD7;
|
||
position: absolute;
|
||
left: 45%;
|
||
top: 50%;
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.container_interell {
|
||
border-top: 1px solid dimgrey;
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(to bottom, #000033, #51599b);
|
||
position: relative;
|
||
|
||
.announcement-bar {
|
||
height: 50px;
|
||
background: linear-gradient(135deg, #000000, #333333);
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||
z-index: 1000;
|
||
}
|
||
|
||
.announcement-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.close-button {
|
||
background: none;
|
||
border: none;
|
||
color: #ffffff;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
// banner
|
||
.banner {
|
||
height: 430rpx;
|
||
width: 100%;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
|
||
.swiper-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
color: #61dafb;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
// 模態框
|
||
.modal {
|
||
width: 600rpx;
|
||
height: 740rpx;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
left: 10%;
|
||
top: 26%;
|
||
border-radius: 40rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
|
||
.modal_title {
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.modal_btn {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
|
||
.savebtn {
|
||
width: 220rpx;
|
||
height: 80rpx;
|
||
background-color: #4f5ad8;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .uni-swiper-slide-frame {
|
||
border-radius: 20rpx;
|
||
}
|
||
</style> |