109 lines
2.8 KiB
Vue
109 lines
2.8 KiB
Vue
<template>
|
|
<view class="min-height bg-main-light">
|
|
<HeaderItem title="企业法治体检"/>
|
|
<u-image src="/legalOrgCheck/static/v2_suc04p.png" width="100%" height="160rpx" mode="widthFix"></u-image>
|
|
<view class="bg-white p-20 text-25 flex justify-start items-center overflow-x">
|
|
<text v-for="(item, index) in typeList" :key="index" class="tag"
|
|
@click="changeType(index)"
|
|
:class="[item.id === activeId ? 'selected-tag' : '']">{{ item.title }}
|
|
</text>
|
|
</view>
|
|
<view class="pos-r">
|
|
<view class="circle-bottom-bg"></view>
|
|
<view class="tips-card-wrap">
|
|
<view class="tips-card">
|
|
<view class="text-28 font-bold text-center">{{ activeTitle }}</view>
|
|
<view class="text-25 mt-20" style="padding-bottom: 50rpx">
|
|
{{ activeContent }}
|
|
</view>
|
|
</view>
|
|
<u-button shape="circle" @click="$jump(`/legalOrgCheck/pages/detail?id=${activeId}&title=${activeTitle}`)"
|
|
:customStyle="{background: 'linear-gradient(91.28deg, rgba(14,146,252,1) 27.63%,rgba(29,188,188,1) 80.08%)',
|
|
border: 0, width: '200rpx',
|
|
color: 'white'}">
|
|
开始
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeaderItem from "@/components/HeaderItem.vue";
|
|
import {listLegalOrgCheckTypeReq} from "@/api/legalOrgCheck";
|
|
|
|
export default {
|
|
name: "index",
|
|
components: {HeaderItem},
|
|
data() {
|
|
return {
|
|
typeList: [],
|
|
activeId: 0,
|
|
activeTitle: 0,
|
|
activeContent: '',
|
|
}
|
|
},
|
|
methods: {
|
|
async getTypeList() {
|
|
const {data} = await listLegalOrgCheckTypeReq()
|
|
this.typeList = data
|
|
this.activeId = data[0].id
|
|
this.activeTitle = data[0].title
|
|
this.activeContent = data[0].content
|
|
},
|
|
changeType(index){
|
|
this.activeId = this.typeList[index].id
|
|
this.activeTitle = this.typeList[index].title
|
|
this.activeContent = this.typeList[index].content
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getTypeList()
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tag {
|
|
padding: 10rpx 25rpx;
|
|
margin-right: 25rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.selected-tag {
|
|
background-color: #FFCA68;
|
|
border-radius: 100rpx;
|
|
}
|
|
|
|
.circle-bottom-bg {
|
|
background-color: #3A89CD;
|
|
width: 100vw;
|
|
height: 200rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 0 0 100vw 100vw;
|
|
}
|
|
|
|
.tips-card-wrap {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 70rpx;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
.tips-card {
|
|
width: 80%;
|
|
line-height: 30rpx;
|
|
padding: 30rpx;
|
|
border-radius: 50rpx;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(16, 16, 16, 1);
|
|
box-shadow: 0 2px 6px 0 rgba(202, 247, 247, 1);
|
|
margin-bottom: 50rpx;
|
|
}
|
|
}
|
|
</style> |