工作台
This commit is contained in:
唐明明
328
pages/index/index.vue
Normal file
328
pages/index/index.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- <video src="https://t12.cdn2020.com:12337/video/m3u8/2021/10/11/d647a87d/index.m3u8"></video> -->
|
||||
<view class="header">
|
||||
<view class="banner">
|
||||
<u-swiper
|
||||
class="banner-swiper"
|
||||
:list="bannerArr"
|
||||
:indicator="true"
|
||||
previousMargin="20"
|
||||
nextMargin="20"
|
||||
circular
|
||||
radius="10"
|
||||
bgColor="#ffffff"
|
||||
height="100%"
|
||||
></u-swiper>
|
||||
</view>
|
||||
<view class="notice">
|
||||
<view class="notice-title">
|
||||
<image class="notice-icon" src="@/static/imgs/notice-icon.png" mode="widthFix"></image>公告
|
||||
</view>
|
||||
<u-notice-bar
|
||||
icon=""
|
||||
:text="notice"
|
||||
direction="column"
|
||||
bgColor="#fff"
|
||||
color="#111111"
|
||||
></u-notice-bar>
|
||||
<view class="notice-more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 自由服务包 -->
|
||||
<view class="free">
|
||||
<image class="free-img" src="@/static/imgs/index-img.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- 经法产品 -->
|
||||
<view class="block">
|
||||
<view class="block-title">
|
||||
<view class="title">经法产品</view>
|
||||
<view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view>
|
||||
</view>
|
||||
<view class="the-tabs">
|
||||
<block v-for="(item, index) in theTabs" :key="index">
|
||||
<view class="the-tabs-item" :class="{'active': item.id == theTabId}" @click="onTheTab(item)">{{item.title}}</view>
|
||||
</block>
|
||||
<view class="the-tabs-acitve-block" :style="theTabStyle"></view>
|
||||
</view>
|
||||
<view class="the-flex">
|
||||
<view class="the-flex-item" v-for="(item, index) in 3" :key="index">
|
||||
<view class="cover"></view>
|
||||
<view class="title nowrap">中国工商信用卡服务...</view>
|
||||
<view class="price nowrap"><text>￥</text>2200</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 综法产品 -->
|
||||
<view class="block">
|
||||
<view class="block-title">
|
||||
<view class="title">综法产品</view>
|
||||
<view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view>
|
||||
</view>
|
||||
<view class="zong-list">
|
||||
<view class="zong-list-item" v-for="(item, index) in 4" :key="index">
|
||||
<image class="cover" src="@/static/imgs/index-pack-01.png" mode="aspectFill"></image>
|
||||
<view class="colum-flex">
|
||||
<view class="title nowrap">2022年尊享综法服务包</view>
|
||||
<view class="price nowrap"><text>￥</text>2200</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { region } from '@/apis/interfaces/address.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
theTabs : [
|
||||
{ id: 1, title: '全部' },
|
||||
{ id: 2, title: '信用卡' },
|
||||
{ id: 3, title: '网贷' },
|
||||
{ id: 4, title: '信用贷' },
|
||||
],
|
||||
theTabId : 1,
|
||||
theTabStyle : {
|
||||
left: '0%'
|
||||
},
|
||||
bannerArr : [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
],
|
||||
notice : [
|
||||
'王**信用卡法务咨询办理成功（今日）',
|
||||
'王**信用卡法务咨询办理成功（今日）',
|
||||
'王**信用卡法务咨询办理成功（今日）',
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 选择城市节点
|
||||
onCityPicker(e){
|
||||
console.log(e)
|
||||
this.getRegion(e.value);
|
||||
},
|
||||
// 获取城市数据
|
||||
getRegion(id){
|
||||
region({
|
||||
parent_id: id
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
// 经法产品筛选
|
||||
onTheTab(e){
|
||||
if(e.id != this.theTabId){
|
||||
let index = this.theTabs.findIndex(val => val.id === e.id)
|
||||
this.theTabStyle = {
|
||||
left: index * (100 / this.theTabs.length) + '%'
|
||||
}
|
||||
this.theTabId = e.id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header{
|
||||
background-color: white;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
// 轮播图
|
||||
.banner{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 43%;
|
||||
.banner-swiper{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// 轮播
|
||||
.notice{
|
||||
background: white;
|
||||
padding: $padding;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.notice-title{
|
||||
background-color: #ECF0FF;
|
||||
color: #446EFE;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
width: 130rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
border-radius: 20rpx;
|
||||
.notice-icon{
|
||||
width: 32rpx;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 8rpx;
|
||||
margin-right: 5rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.notice-more{
|
||||
font-size: 14px;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
.more-icon{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 自由服务包
|
||||
.free{
|
||||
padding: $padding;
|
||||
.free-img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// 综法
|
||||
.zong-list{
|
||||
padding: 0 $padding 20rpx;
|
||||
margin-bottom: 30rpx;
|
||||
&-item{
|
||||
position: relative;
|
||||
margin-bottom: 30rpx;
|
||||
padding-left: 210rpx;
|
||||
height: 180rpx;
|
||||
.cover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
}
|
||||
.colum-flex{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 180rpx;
|
||||
.title{
|
||||
line-height: 40rpx;
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
}
|
||||
.price{
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
color: $text-price;
|
||||
font-size: 34rpx;
|
||||
text{
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 经法
|
||||
.the-tabs{
|
||||
background: #ECF0FF;
|
||||
margin: 0 $margin;
|
||||
height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
&-item{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 25%;
|
||||
line-height: 70rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
transition: all .4s;
|
||||
&.active{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&-acitve-block{
|
||||
width: 25%;
|
||||
height: 70rpx;
|
||||
background: #446EFE;
|
||||
border-radius: 35rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all .4s;
|
||||
}
|
||||
}
|
||||
.the-flex{
|
||||
padding: $padding 20rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&-item{
|
||||
width: calc(33.33% - 20rpx);
|
||||
margin: 0 10rpx;
|
||||
.cover{
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
background: #f8f8f8;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 32rpx;
|
||||
color: #111111;
|
||||
padding: 10rpx 0;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.price{
|
||||
line-height: 40rpx;
|
||||
font-weight: bold;
|
||||
color: $text-price;
|
||||
font-size: 34rpx;
|
||||
text{
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 模块
|
||||
.block{
|
||||
background-color: white;
|
||||
border-radius: $radius;
|
||||
margin: 0 $margin $margin;
|
||||
.block-title{
|
||||
padding: 0 $padding;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
color: #111111;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.more{
|
||||
background-color: #F5F5F5;
|
||||
font-size: 28rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
width: 120rpx;
|
||||
padding-left: 10rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
.more-icon{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user