123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <template>
- <view class="container clearfix">
- <view class="foot-list">
- <view class="list-cell-item">
- <view class="list-cell" v-for="(item,index) in certificates" :key="index" @click="handleClick(item.id)"
- hover-class="cell-hover" :hover-stay-time="50">
- <text class="cell-tit">{{ item.name }}</text>
- <text class="cell-more">
- <text class="iconfont icon-xiayibu"></text>
- </text>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- certificates: [
- { name: '中华人民共和国增值电信业务经营许', id: 1 },
- { name: '医疗器械网络交易服务第三方平台备案凭证', id: 2 },
- { name: '互联网药品信息服务资格证编号(粤)-非经营性-2021-0339', id: 3 },
- ]
- }
- },
- onLoad(option) {
- },
- methods: {
- handleClick(id) { // 跳转资质证书
- this.$api.navigateTo(`/pages/service/certificate?id=${id}`)
- }
- },
- onShow() {}
- }
- </script>
- <style lang='scss'>
- page {
- height: auto;
- }
- page,
- .container {
- /* padding-bottom: 120upx; */
- background: #fff;
- /* border-top: 1px solid #EBEBEB; */
- }
- .foot-list {
- width: 100%;
- margin-top: 30rpx;
- }
- .list-cell-item {
- width: 702rpx;
- height: auto;
- margin-bottom: 24rpx;
- padding: 0 24rpx;
- background: $bg-color;
- }
- .list-cell {
- display: flex;
- width: 100%;
- align-items: baseline;
- line-height: 100rpx;
- position: relative;
- background: $bg-color;
- justify-content: center;
- border-bottom: 1px solid #EBEBEB;
- &.cell-hover {
- background: #fafafa;
- }
- .cell-more {
- align-self: baseline;
- font-size: $font-size-28;
- color: #b2b2b2;
- margin-left: 10rpx;
- .txt {
- color: #999999;
- padding-right: 10rpx;
- }
- }
- .cell-tit {
- flex: 1;
- font-size: $font-size-24;
- color: #666666;
- margin-right: 10rpx;
- }
- .cell-tip {
- font-size: $font-size-28;
- color: $text-color;
- }
- }
- .list-cell.last {
- border-bottom: none;
- }
- </style>
|