128 lines
2.9 KiB
Plaintext
128 lines
2.9 KiB
Plaintext
<template>
|
|
<view class="fui-wrap">
|
|
<view class="fui-page__hd">
|
|
<view class="fui-align__center" @tap="href(1)">
|
|
<text class="fui-page__title">Roll Horizontal</text>
|
|
<image src="/static/images/index/light/icon_member_3x.png" class="fui-vip__icon"></image>
|
|
</view>
|
|
<text class="fui-page__desc">横向滚动，常用的页面布局，可提升开发效率以及带来舒服的视觉效果！</text>
|
|
</view>
|
|
<view class="fui-page__bd fui-page__spacing">
|
|
<text class="fui-section__title">访问记录</text>
|
|
<view class="fui-card__wrap">
|
|
<fui-list-cell background="transparent" arrow :bottomBorder="false" :highlight="false"
|
|
:padding="['24rpx','24rpx','48rpx']">
|
|
<view class="fui-card__header">
|
|
<fui-text text="我的经常访问" :size="28" fontWeight="bold"></fui-text>
|
|
<fui-text text="查看全部" :size="26" type="gray"></fui-text>
|
|
</view>
|
|
</fui-list-cell>
|
|
<scroll-view :scroll-x="true" :show-scrollbar="false" class="fui-scroll__view">
|
|
<view class="fui-cell__list">
|
|
<view class="fui-list__item" v-for="(item,index) in records" :key="index">
|
|
<fui-avatar :src="item.avatar" marginBottom="20"></fui-avatar>
|
|
<fui-overflow-hidden :text="item.name" align="center" :size="26" width="128rpx">
|
|
</fui-overflow-hidden>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view class="fui-btn__box">
|
|
<fui-button type="gray" btn-size="medium" text="自定义滚动条" bold @click="href(2)"></fui-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mock from './index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
records: mock.records
|
|
}
|
|
},
|
|
methods: {
|
|
href(type) {
|
|
const url = type === 1 ? "/pages/my/qa/qa?index=2&title=VIP专属内容" : '/pages/component/layout/horizontal-scroll/horizontal-scroll'
|
|
uni.fui.href(url)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* #ifndef APP-NVUE */
|
|
page {
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
.fui-align__center {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.fui-section__title {
|
|
/* #ifdef APP-NVUE */
|
|
margin-top: 64rpx;
|
|
/* #endif */
|
|
}
|
|
|
|
.fui-btn__box {
|
|
/* #ifndef APP-NVUE */
|
|
width: 100%;
|
|
display: flex;
|
|
/* #endif */
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-top: 64rpx;
|
|
}
|
|
|
|
/*
|
|
访问记录
|
|
*/
|
|
.fui-card__wrap {
|
|
/* #ifndef APP-NVUE */
|
|
width: 100%;
|
|
/* #endif */
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.fui-card__header {
|
|
flex: 1;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
width: 100%;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.fui-scroll__view {
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.fui-cell__list {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
}
|
|
|
|
.fui-list__item {
|
|
width: 160rpx;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 16rpx 24rpx;
|
|
}
|
|
</style> |