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>
|