You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
8.0 KiB
341 lines
8.0 KiB
<template>
|
|
<page-meta
|
|
:page-style="`overflow:${isShowQrcode ? 'hidden' : 'visible'};`"
|
|
></page-meta>
|
|
<view class="content" :style="{ 'padding-top': paddingTop + 'px' }">
|
|
<image class="bkg" src="~@/static/index/bkg.png" mode="aspectFill"></image>
|
|
|
|
<view class="wrap">
|
|
<image
|
|
class="title"
|
|
src="~@/static/index/title.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
|
|
<view class="grid">
|
|
<view
|
|
class="grid1 grid-item"
|
|
@click="
|
|
$u.route({ url: '/package_sub/pages/RecommendForm/RecommendForm' })
|
|
"
|
|
>
|
|
<image
|
|
class="grid-item__icon"
|
|
src="~@/static/index/zhinengtuijian.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<view class="grid-item__name">智能推荐</view>
|
|
<view class="grid-item__subname">冲、稳、保学校</view>
|
|
</view>
|
|
<view
|
|
class="grid2 grid-item"
|
|
@click="$u.route({ url: '/package_sub/pages/BatchForm/BatchForm' })"
|
|
>
|
|
<image
|
|
class="grid-item__icon"
|
|
src="~@/static/index/monitianbao.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<view class="grid-item__name">志愿填报</view>
|
|
</view>
|
|
<view
|
|
class="grid3 grid-item"
|
|
@click="$u.route({ url: '/package_sub/pages/IndependentRecruitment/IndependentRecruitment' })"
|
|
>
|
|
<image
|
|
class="grid-item__icon"
|
|
src="~@/static/index/zizhuzhaosheng.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
<view class="grid-item__name">自主招生</view>
|
|
</view>
|
|
<view
|
|
class="grid4 grid-item"
|
|
@click="
|
|
$u.route({ url: '/package_sub/pages/HistoryScore/HistoryScore' })
|
|
"
|
|
>
|
|
<view class="grid-item__name"> 历年录取<br />分数线 </view>
|
|
</view>
|
|
<view
|
|
class="grid5 grid-item"
|
|
@click="
|
|
$u.route({ url: '/package_sub/pages/TargetCount/TargetCount' })
|
|
"
|
|
>
|
|
<view class="grid-item__name"> 历年各初中<br />指标生 </view>
|
|
</view>
|
|
<view
|
|
class="grid6 grid-item"
|
|
@click="$u.route({ url: '/package_sub/pages/SchoolList/SchoolList' })"
|
|
>
|
|
<view class="grid-item__name">学校库</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view
|
|
class="list-item"
|
|
v-for="i in banners"
|
|
:key="i.id"
|
|
@click="bannerJump2(i)"
|
|
>
|
|
<image
|
|
class="list-item__img"
|
|
mode="aspectFill"
|
|
:src="i.image ? i.image.url : '/static/index/template1.png'"
|
|
></image>
|
|
<view class="list-item__name">{{ i.name }}</view>
|
|
<view v-if="i.sub_name" class="list-item__subname">{{
|
|
i.sub_name
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<image
|
|
class="online-service"
|
|
src="~@/static/index/online-service.png"
|
|
mode="aspectFit"
|
|
@click="isShowQrcode = true"
|
|
></image>
|
|
|
|
<u-mask :show="isShowQrcode" border-radius="14" @click="isShowQrcode = false">
|
|
<view class="qrcode-wrap">
|
|
<Qrcode @tap.stop></Qrcode>
|
|
</view>
|
|
</u-mask>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Qrcode from '@/component/Qrcode/index.vue'
|
|
export default {
|
|
components: {
|
|
Qrcode
|
|
},
|
|
data() {
|
|
return {
|
|
isShowQrcode: false,
|
|
banners: [],
|
|
};
|
|
},
|
|
onLoad() {},
|
|
methods: {
|
|
async getBanners() {
|
|
try {
|
|
const { list } = await this.$u.api.banners();
|
|
this.banners = list;
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
},
|
|
bannerJump2(i) {
|
|
console.log(i);
|
|
if (i.jump_url === "#") {
|
|
return;
|
|
}
|
|
if (i.jump_type === 1) {
|
|
uni.navigateToMiniProgram({
|
|
appId: i.jump_url,
|
|
});
|
|
} else if (i.jump_type === 2) {
|
|
this.$u.route({
|
|
url: "/package_sub/pages/webview/webview",
|
|
params: {
|
|
src: i.jump_url,
|
|
},
|
|
});
|
|
} else if (i.jump_type === 3) {
|
|
this.$u.route({
|
|
url: "/package_sub/pages/LoadImage/LoadImage",
|
|
params: {
|
|
src: i.jump_url,
|
|
},
|
|
});
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
paddingTop() {
|
|
return getApp().globalData.navbarHeight;
|
|
},
|
|
},
|
|
created() {
|
|
this.getBanners();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
padding-bottom: 40rpx;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
background: #dff2fe;
|
|
|
|
.bkg {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
.wrap {
|
|
padding-top: 72rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.title {
|
|
width: 495rpx;
|
|
height: 52rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.grid {
|
|
padding: 0 26rpx;
|
|
margin-top: 44rpx;
|
|
display: grid;
|
|
grid-gap: 26rpx;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
grid-template-rows: 197rpx 108rpx 176rpx;
|
|
grid-template-areas:
|
|
"grid1 grid1 grid1 grid2 grid2 grid2"
|
|
"grid1 grid1 grid1 grid3 grid3 grid3"
|
|
"grid4 grid4 grid5 grid5 grid6 grid6";
|
|
|
|
$grid-colors: linear-gradient(
|
|
0deg,
|
|
#c2e0fc 0%,
|
|
#c2e0fc 8%,
|
|
#fcfcfe 70%,
|
|
#fcfcfe 100%
|
|
),
|
|
linear-gradient(0deg, #f5ddc5 0%, #f5ddc5 1%, #fcfcfe 74%, #fcfcfe 100%),
|
|
linear-gradient(0deg, #c6e1d4 0%, #fdfdfe 100%),
|
|
linear-gradient(-37deg, #ee6734 0%, #f7915b 100%),
|
|
linear-gradient(-37deg, #8773e9 0%, #c39df5 100%),
|
|
linear-gradient(-37deg, #4f83f9 0%, #a3b9fd 100%);
|
|
$font-colors: #1989fa, #ea9332, #3cb877, #fff, #fff, #fff;
|
|
@for $i from 1 through length($grid-colors) {
|
|
.grid#{$i} {
|
|
grid-area: grid#{$i};
|
|
background: nth($grid-colors, $i);
|
|
border-radius: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.grid-item__name {
|
|
color: nth($font-colors, $i);
|
|
}
|
|
}
|
|
}
|
|
&-item {
|
|
&__icon {
|
|
width: 80rpx;
|
|
height: 89rpx;
|
|
}
|
|
&__name {
|
|
font-size: 32rpx;
|
|
line-height: 50rpx;
|
|
text-transform: uppercase;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.grid1 {
|
|
.grid-item__name {
|
|
padding: 46rpx 0 14rpx;
|
|
}
|
|
.grid-item__subname {
|
|
font-size: 24rpx;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
}
|
|
.grid2, .grid3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.grid-item__name {
|
|
padding-left: 20rpx;
|
|
// padding: 46rpx 0 0;
|
|
}
|
|
}
|
|
.grid3 {
|
|
|
|
.grid-item__icon {
|
|
width: 69rpx;
|
|
height: 69rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
margin-top: 25rpx;
|
|
padding: 26rpx;
|
|
|
|
&-item {
|
|
border-radius: 15rpx;
|
|
filter: drop-shadow(3.993rpx 3.009rpx 5rpx rgba(81, 158, 236, 0.6));
|
|
background-color: #f7f6f7;
|
|
position: relative;
|
|
height: 172rpx;
|
|
padding: 0 44rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
overflow: hidden;
|
|
|
|
&__img {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
mask-image: linear-gradient(to right, transparent, #f7f6f7);
|
|
}
|
|
&__name {
|
|
font-size: 40rpx;
|
|
color: #e47829;
|
|
font-weight: 500;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
&__subname {
|
|
font-size: 24rpx;
|
|
color: rgba(0, 0, 0, 0.7);
|
|
font-weight: 500;
|
|
margin-top: 16rpx;
|
|
}
|
|
}
|
|
|
|
.list-item + .list-item {
|
|
margin-top: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.online-service {
|
|
position: fixed;
|
|
bottom: 56rpx;
|
|
right: 2rpx;
|
|
width: 142rpx;
|
|
height: 140rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.qrcode-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
</style>
|