caimei-applets-caimei/components/cm-module/homeIndex/quickOperation.vue

<template>
    <!-- 快捷运营 -->
    <view class="container-pages">
		<scroll-view scroll-x>
			<view class="tui-goods__list">
				<view class="tui-goods__item" v-for="(item, index) in list"  @click="NavToDetailPage(item)">
					<view class="list-title">
						<view class="title-1">
							<view class="title-1-item">
								<view style="display: inline-block;">{{ item.name }}</view>
								<text class="title-2-item">GO></text>
							</view>
						</view>
						<view class="title-2">{{item.remark || ''}}</view>
					</view>
					<view class="list-icon">
						<image class="image" :src="item.icon" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>	
    </view>
</template>

<script>
import cmsMixins from '@/mixins/cmsMixins.js'
import { mapState } from 'vuex'
export default {
    mixins: [cmsMixins],
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
			shortcutList:[],
            current: 0 // 切换轮播
        }
    },
	created() {
		this.shortcutList = this.list
	},
    computed: {
        ...mapState(['hasLogin']),
    },
    watch: {},
    mounted() {},
    methods: {
        // 链接跳转
        NavToDetailPage(pros) {
            // 采美快捷运营点击量统计
            this.cmsMoudleHits(4, pros.id)
			this.$api.FlooryNavigateTo(pros)
        },
        swiperChange(e) {
            //轮播图切换
            this.current = e.detail.current
        }
    }
}
</script>

<style lang="scss" scoped>
	
.container-pages {
	width: 100%;
	height: 152rpx;
	padding: 24rpx 24rpx 0 24rpx;
	float: left;
	background-color: #f7f7f7;
	box-sizing: border-box;
	background-color: #f7f7f7;
	overflow: hidden;
	display: flex;
	align-items: center;
	.tui-goods__list {
		display: flex;
		align-items: center;
		.tui-goods__item {
			background-color: #fff;
			height: 128rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			margin-right: 16rpx;
			padding:24rpx 12rpx 24rpx 18rpx;
			display: flex;
			align-items: center;
			background: linear-gradient(180deg, #FFF1EB 0%, #FFFFFF 100%);
			.list-title {
			    .title-1 {
			        .title-1-item {
			            color: #333333;
			            font-size: 28rpx;
			            width: 196rpx;
			            display: flex;
			            align-items: center;
			            .title-2-item {
			                width: 62rpx;
			                height: 32rpx;
			                background: #ff5b00;
			                border-radius: 16rpx;
			                font-size: 22rpx;
			                text-align: center;
			                height: 32rpx;
			                color: white;
			                margin-left: 6rpx;
			            }
			        }
			    }
			    .title-2 {
			        color: #999999;
			        font-size: 22rpx;
			    }
			}
			.list-icon {
			    height: 100%;
			    border-radius: 50%;
			    overflow: hidden;
				.image{
					width: 80rpx;
					height: 100%;
				}
			}
		}	
	}
}
</style>