<template>
<view class="boxPage">
<view class="imgList">
<view v-for="(item, index) in randomDataMarketList" :key="index" class="imgBox">
<image :src="item.imgUrl" mode="widthFix" class="img"></image>
<view class="title">{{item.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
dataMarketList: [{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/stock.png',
name: '股票',
activeIndex: 1
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/fund.png',
name: '基金',
activeIndex: 2
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/futures.png',
name: '期货',
activeIndex: 3
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/economics.png',
name: '经济',
activeIndex: 4
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/info.png',
name: '资讯',
activeIndex: 5
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/bank.png',
name: '银行',
activeIndex: 6
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/out.png',
name: '海外',
activeIndex: 7
},
{
imgUrl: 'https://csmarapi.csmar.com/byao/images/datatype/industry.png',
name: '行业',
activeIndex: 8
},
],
randomDataMarketList: [], // 随机3个库列表
};
},
onLoad(option) {
},
onShow() {
this.getRandomDataMarketList(this.dataMarketList)
},
mounted() {
},
methods: {
// 获取列表(每次进入页面随机3个)
getRandomDataMarketList(arr) {
this.randomDataMarketList = arr.sort((x, y) => {
return Math.random() > 0.5 ? -1 : 1;
}).slice(0, 3)
},
}
}
</script>
<style lang="scss" scoped>
.imgList {
margin: 0 26rpx;
display: flex;
justify-content: space-between;
.imgBox {
.img {
width: 210rpx;
height: 160rpx;
background: #E0E5EC;
border-radius: 16rpx;
}
.title {
margin-top: 7rpx;
margin-bottom: 30rpx;
width: 210rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
overflow: hidden; //1行超出隐藏
white-space: nowrap; //不折行
text-overflow: ellipsis; //溢出显示省略号
word-wrap: break-word; // 数字与汉字结合不换行展示
word-break: break-all;
// -webkit-line-clamp: 2; 超出2行显示省略号
// display: -webkit-box;
// -webkit-box-orient: vertical;
// overflow: hidden;
// text-overflow: ellipsis;
}
}
}
</style>
