51 lines
2.2 KiB
Vue
51 lines
2.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="list">
|
|
<view class="item" v-for="(item, index) in childrenArr" :key="index">
|
|
<view class="item-number"><text>0{{index + 1}}</text></view>
|
|
<view class="nowrap item-name">{{item.title}}</view>
|
|
<view class="nowrap item-text">{{item.subtitle}}</view>
|
|
<view class="item-more">
|
|
<view class="item-more-name" @click="onNav(item.id)">点击查看详情</view>
|
|
<view class="footer-tool-label-icon"><u-icon name="arrow-right" size="16" /></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { bigfive } from '@/apis/interfaces/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
childrenArr: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
},
|
|
onShow() {
|
|
const parentData = JSON.parse(decodeURIComponent(this.$Route.query.children))
|
|
this.childrenArr = parentData
|
|
},
|
|
methods: {
|
|
// 跳转
|
|
onNav(id){
|
|
this.$Router.push({name: 'businessInfo', params:{bigFive:id}})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list {padding: $padding; box-sizing: border-box;}
|
|
.item {background-color: #ffffff; border-radius: $radius; position: relative;padding: $padding; box-sizing: border-box; overflow: hidden; margin-bottom: $margin;}
|
|
.item-name {font-weight: bold; font-size: $title-size + 8; color: #c92453;}
|
|
.item-text {font-size: $title-size; color: #111111; line-height: 54rpx; padding: $padding 0;}
|
|
.item-more {color: #666666; border-top: 2rpx solid #eeeeee;display: flex; line-height: 44rpx; font-size: $title-size; padding-top: $padding;}
|
|
.item-more-name {flex: 1;}
|
|
.footer-tool-label-icon {line-height: 44rpx; padding-top: 4rpx; font-weight: 600;}
|
|
.item-number {background-color: #fea6cd; position: absolute; right: 0; top: 0; color: #c92553; font-weight: bold; font-size: $title-size + 2; border-radius: 0 $radius 0 $radius + 20; overflow: hidden; padding: 0 $padding - 20rpx 0 $padding - 10;}
|
|
.item-number::after {position: absolute; content: ''; bottom: -48%; left: -78%; background-color: #ffc8e7; width: 200%; height: 100%; z-index: 9; border-radius: 100%;transform: rotate(45deg);}
|
|
.item-number text {transform: rotate(45deg); display: inline-block; margin: 5rpx 0 10rpx;}
|
|
</style> |