### [UNIapp 切片，轻应用页面代码参考备份1](https://pmself.com/article/2213)

**Published:** 2023-05-27T08:12:27

**Author:** pmself

**Excerpt:** 卡片服务快应用VUE.js代码参考： 完整的vue.js代码如下：

卡片服务快应用VUE.js代码参考：

![](https://pmself.com/wp-content/uploads/2023/05/20230527160841.jpg)

完整的vue.js代码如下：

\[content\_hide\]

```

<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper">
            <text class="txt01">
                快捷服务
            </text>
            <view class="flex-row wraper-row">
                <navigator url="/pages/web-view/web-view?url=http://wnl.fatelist.com/wnl/"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/wnl.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=https://weatherat.com/#/"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/tianqi.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/xlcs.png"></image>
</navigator>
                <navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%B0%8F%E8%AF%B4"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/xiaoshuo.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://wnl.fatelist.com/faxian/chisha/"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/chisha.png"></image></navigator>
            </view>
            <view class="flex-row wraper-row-two">
                <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=http://wnl.fatelist.com/wnl/">日历黄历</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=https://weatherat.com/#/">新天气象</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam">心理评测</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%B0%8F%E8%AF%B4">免费小说</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=http://wnl.fatelist.com/faxian/chisha/">今天吃啥</navigator>
                </text>
            </view>
            <view class="flex-row wraper-row-three">
                <navigator url="/pages/web-view/web-view?url=https://h5.codefuture.top/widgetbox-h5/quickcard/poetry"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/yulu.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://m.hao123.com/next/website"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/wzdq.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=https://www.hipdf.cn/all-tools"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/pdf.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=https://finance.sina.cn/honor/set.shtml#/hq/"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/sina.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=https://piaofang.maoyan.com/box-office"><image class="icon10" src="http://cha.pmself.com/images/kyinyon/maoyan.png"></image></navigator>
            </view>
            <view class="flex-row wraper-row-four">
                <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=https://h5.codefuture.top/widgetbox-h5/quickcard/poetry">每日诗词</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=http://m.hao123.com/next/website">网址大全</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=https://www.hipdf.cn/all-tools">文档转换</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=https://finance.sina.cn/honor/set.shtml#/hq/">财经行情</navigator>
                </text> <text class="txt010">
                <navigator url="/pages/web-view/web-view?url=https://piaofang.maoyan.com/box-office">猫眼票房</navigator>
                </text>
            </view>
        </view><text class="txt02">
            卡片服务
        </text>
        <view class="flex-row wrapper-two">
            <view class="flex-col ka1">
                <image class="pic001" src="http://cha.pmself.com/images/kyinyon/xlcs.png"></image><text class="text013">
                    不好的心情随时有
                </text> <text class="text014">
                    娱乐却常在
                </text>
                <view class="box">
                    <text class="text015">
                        <navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam">去评测</navigator>
                    </text>
                </view><text class="text011">
                    <navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam">心理评测</navigator>
                </text>
            </view>
            <view class="flex-col ka2">
                <view class="flex-row box-two">
                    <text class="text012">
                    <navigator url="/pages/web-view/web-view?url=https://img.ithome.com/app/calendar/event_list.html">IT事件日历</navigator>
                    </text>
                    <image class="pic002" src="http://cha.pmself.com/images/kyinyon/it.png"></image>
                </view><text class="text016">
                    <navigator url="/pages/web-view/web-view?url=https://img.ithome.com/app/calendar/event_list.html">互联网耀新品发布大会...</navigator>
                </text> <text class="text02">
                    12:09 19:25 线上
                </text> <text class="text017">
                    <navigator url="/pages/web-view/web-view?url=https://img.ithome.com/app/calendar/event_list.html">寒冬之日投资该如何做...</navigator>
                </text> <text class="text04">
                    12:09 19:25 线上
                </text>
            </view>
        </view>
        <view class="flex-row wrapper-three">
            <navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E6%98%9F%E5%BA%A7"><view class="ka3"></view></navigator>
            <view class="wraper-col">
                <navigator url="/pages/web-view/web-view?url=https://m.cctv.com/"><view class="ka4"></view></navigator>
                <navigator url="/pages/web-view/web-view?url=http://sm.fatelist.com/?ac=bazijp"><view class="ka5"></view></navigator>
            </view>
        </view>
        <view class="flex-row wrapper-four">
            <navigator url="/pages/web-view/web-view?url=http://scm.artupu.com"><view class="ka6"></view></navigator>
            <navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E7%BE%8E%E5%A5%B3%E5%A3%81%E7%BA%B8"><view class="ka7"></view></navigator>
        </view>
        <view class="flex-col ka8">
            <text class="text021">
                <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi">岁月如水，心事如何述说...</navigator>
            </text> <text class="text">
                人生一场，输了什么，不能输了心情
            </text> <text class="text021">
                <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi">倾听心声，世界与你同在...</navigator>
            </text> <text class="text-two">
                倾听师一对一只为与你交流
            </text>
            <image class="pic003" src="http://cha.pmself.com/images/kyinyon/xlcs.png"></image><text class="text019">
            <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi">倾听烦恼有谁说 - 倾愈</navigator>
            </text>
            <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi"><image class="pic002-two" src="http://cha.pmself.com/images/kyinyon/hxq.png"></image></navigator>
        </view><text class="text035">
            生活服务
        </text>
        <view class="flex-row wrapper-five">
            <view class="flex-row ka9">
				<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E8%87%B4%E6%95%AC%E6%88%91%E4%BB%AC%E7%9A%84%E5%A9%9A%E5%A7%BB%E5%92%8C%E6%9B%BE%E7%BB%8F%E5%B9%B4%E8%BD%BB%E5%8B%87%E6%95%A2%E7%9A%84%E6%88%91%E4%BB%AC&ts=0&t_kt=0&ie=utf-8&rsv_iqid=2711515598&rsv_t=9a0agJrBqUdPDLgj3AR5yg1qZPj9XwUWqfqA8VqClS2HMQKQADMg&sa=ib&rsv_pq=2711515598&rsv_sug4=1670490223683&tj=1&ss=110&inputT=1670490224075&sugid=5832823035201"><image class="pic0006" src="http://cha.pmself.com/images/kyinyon/pic/hunyin.jpg"></image></navigator>
                <text class="text022">
                    <navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E8%87%B4%E6%95%AC%E6%88%91%E4%BB%AC%E7%9A%84%E5%A9%9A%E5%A7%BB%E5%92%8C%E6%9B%BE%E7%BB%8F%E5%B9%B4%E8%BD%BB%E5%8B%87%E6%95%A2%E7%9A%84%E6%88%91%E4%BB%AC&ts=0&t_kt=0&ie=utf-8&rsv_iqid=2711515598&rsv_t=9a0agJrBqUdPDLgj3AR5yg1qZPj9XwUWqfqA8VqClS2HMQKQADMg&sa=ib&rsv_pq=2711515598&rsv_sug4=1670490223683&tj=1&ss=110&inputT=1670490224075&sugid=5832823035201">致敬我们的婚姻和曾经年轻勇敢的我们</navigator>
                </text>
            </view>
            <navigator url="/pages/web-view/web-view?url=http://dsqm.fatelist.com/?ac=dashi"><view class="ka10">
            </view></navigator>
        </view>
        <view class="flex-col ka11">
            <view class="flex-row wraper-row-five">
                <view class="flex-col flex-row box-three">
                    <view class="flex-row box-row">
                        <image class="pic009" src="http://cha.pmself.com/images/kyinyon/jijiu.png"></image><text class="text025">
                            <navigator url="/pages/web-view/web-view?url=https://m.youlai.cn/jijiu">急救百科</navigator>
                        </text>
                    </view><text class="text026">
                        人生必学急救术
                    </text>
                </view>
                <navigator url="/pages/web-view/web-view?url=http://m.douyu.com/"><image class="icon20" src="http://cha.pmself.com/images/kyinyon/douyu.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://sm.fatelist.com/?ac=xydd"><image class="icon21" src="http://cha.pmself.com/images/kyinyon/qfdd.png"></image></navigator>
            </view>
            <view class="flex-row wraper-row-six">
                <text class="text027">
                    心肺复苏 海姆立克
                </text>
                <navigator url="/pages/web-view/web-view?url=http://wnl.fatelist.com/wnl/"><image class="icon22" src="http://cha.pmself.com/images/kyinyon/wnl.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://dsqm.fatelist.com/?ac=dashi"><image class="icon23" src="http://cha.pmself.com/images/kyinyon/qiming.png"></image></navigator>
            </view>
            <view class="wraper-row-seven">
                <text class="text028">
                    <navigator url="/pages/web-view/web-view?url=https://m.youlai.cn/jijiu">GET急救技能</navigator>
                </text>
            </view>
        </view>
        <view class="flex-col ka12">
            <view class="flex-row wraper-row-eight">
                <image class="pic009" src="http://cha.pmself.com/images/kyinyon/yunshi.png"></image><text class="text030">
                    禅定心神
                </text>
            </view>
            <view class="flex-row wraper-row-nine">
                <navigator url="/pages/web-view/web-view?url=http://xinli.biuhealth.com/mx/chanding.html"><image class="icon13" src="http://cha.pmself.com/images/kyinyon/chanyin.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam"><image class="icon13" src="http://cha.pmself.com/images/kyinyon/xlcs.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi"><image class="icon13" src="http://cha.pmself.com/images/kyinyon/qingyu.png"></image></navigator>
                <navigator url="/pages/web-view/web-view?url=http://xinli.biuhealth.com/mx/muyu.html"><image class="icon14" src="http://cha.pmself.com/images/kyinyon/muyu.png"></image></navigator>
            </view>
            <view class="flex-row wraper-row-ten">
                <text class="text039">
                    <navigator url="/pages/web-view/web-view?url=http://xinli.biuhealth.com/mx/chanding.html">禅音缭绕</navigator>
                </text> <text class="text039">
                    <navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam">心理评测</navigator>
                </text> <text class="text039">
                    <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi">倾听语聊</navigator>
                </text> <text class="text039">
                    <navigator url="/pages/web-view/web-view?url=http://xinli.biuhealth.com/mx/muyu.html">电子木鱼</navigator>
                </text>
            </view>
        </view><text class="text035">
            更多应用
        </text>
        <view class="flex-row wrapper-six">
            <navigator url="/pages/web-view/web-view?url=http://game.qvkanwen.com/allegoricalIndex"><view class="ka14"></view></navigator>
            <view class="flex-col ka13">
                <view class="flex-row box-four">
                    <navigator url="/pages/web-view/web-view?url=http://sm.fatelist.com/"><image class="icon18" src="http://cha.pmself.com/images/kyinyon/cesuan-logo.png"></image></navigator>
                    <navigator url="/pages/web-view/web-view?url=http://wnl.fatelist.com/wnl/"><image class="icon18" src="http://cha.pmself.com/images/kyinyon/wnl.png"></image></navigator>
                </view>
                <view class="flex-row box-five">
                    <text class="text039">
                        <navigator url="/pages/web-view/web-view?url=http://sm.fatelist.com/">永乐测算</navigator>
                    </text> <text class="text039">
                        <navigator url="/pages/web-view/web-view?url=http://wnl.fatelist.com/wnl/">万年历</navigator>
                    </text>
                </view>
            </view>
        </view>
        <view class="flex-row wrapper-seven">
            <view class="flex-col ka15">
                <view class="flex-row box-six">
                    <navigator url="/pages/web-view/web-view?url=http://dsqm.fatelist.com/?ac=dashi"><image class="icon18" src="http://cha.pmself.com/images/kyinyon/qiming.png"></image></navigator><text class="text040">
                    <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi">倾愈倾诉</navigator>
                    </text>
                </view>
                <view class="flex-row box-seven">
                    <text class="text039">
                    <navigator url="/pages/web-view/web-view?url=http://dsqm.fatelist.com/?ac=dashi">从龙起名</navigator>
                    </text>
                    <navigator url="/pages/web-view/web-view?url=http://dsxinli.fatelist.com/?ac=dashi"><image class="icon18" src="http://cha.pmself.com/images/kyinyon/qingyu.png"></image></navigator>
                </view>
            </view>
            <navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E4%B8%AD%E5%8C%BB"><view class="ka16"></view></navigator>
        </view>
        <view class="flex-row wrapper-eight">
            <navigator url="/pages/web-view/web-view?url=https://m.kanabc.com/mf/list?aid=3a4g78zb"><view class="ka17"></view></navigator>
            <navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E6%9D%A8%E5%B9%82"><view class="ka18"></view></navigator>
        </view>
		<text class="text035">
	
		</text>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {

        }
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 24rpx 24rpx 0rpx 24rpx;

        .wrapper {
            width: 100%;
            height: 412rpx;
            margin-bottom: 112rpx;
            padding: 20rpx 0rpx 0rpx 31rpx;
            border-radius: 20rpx;
            background: #ffffff;

            .txt01 {
                width: 128rpx;
                margin-bottom: 26rpx;
                font-size: 32rpx;
                font-weight: 700;
            }

            .wraper-row {
                width: 601.6rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 10rpx 18rpx;
                padding-right: 1.6rpx;

                .icon10 {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 20rpx;
                    box-shadow: 1px 2px 5px #BCBEBE;
                }
            }

            .wraper-row-two {
                width: 618.6rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 40rpx 10rpx;
                padding-right: 2.6rpx;

                .txt010 {
                    font-size: 24rpx;
                    line-height: 28rpx;
                }
            }

            .wraper-row-three {
                width: 602.6rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 10rpx 18rpx;
                padding-right: 2.6rpx;

                .icon10 {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 20rpx;
                    box-shadow: 1px 2px 5px #BCBEBE;
                }
            }

            .wraper-row-four {
                width: 618.6rpx;
                justify-content: space-between;
                margin-left: 10rpx;
                padding-right: 2.6rpx;

                .txt010 {
                    font-size: 24rpx;
                    line-height: 28rpx;
                }
            }
        }

        .wrapper-two {
            width: 670rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;

            .ka1 {
                width: 320rpx;
                height: 320rpx;
                padding: 24rpx 0rpx 0rpx 25rpx;
                border-radius: 40rpx;
                background: #67CFCD;
                box-shadow: 1px 2px 5px #BCBEBE;

                .pic001 {
                    width: 40rpx;
                    height: 40rpx;
                    margin: 0rpx 0rpx 34rpx 220rpx;
                    border-radius: 40rpx;
                }

                .text013 {
                    width: 192rpx;
                    margin-bottom: 20rpx;
                    font-size: 24rpx;
                    line-height: 28rpx;
                    color: #ffffff;
                }

                .text014 {
                    width: 120rpx;
                    margin-bottom: 34rpx;
                    font-size: 24rpx;
                    line-height: 28rpx;
                    color: #ffffff;
                }

                .box {
                    width: 200rpx;
                    margin-left: 30rpx;
                    padding: 11rpx 0rpx;
                    border-radius: 40rpx;
                    background: #ffffff;
                    text-align: center;

                    .text015 {
                        font-size: 28rpx;
                        line-height: 28rpx;
                        color: #67CFCD;
                    }
                }

                .text011 {
                    top: 30rpx;
                    left: 24rpx;
                    font-size: 28rpx;
                    position: absolute;
                    line-height: 28rpx;
                    font-weight: 600;
                    color: #ffffff;
                }
            }

            .ka2 {
                width: 320rpx;
                height: 320rpx;
                padding: 24rpx 0rpx 0rpx 25rpx;
                border-width: 2rpx;
                border-color: #f0e0e0;
                border-radius: 40rpx;
                background: #ffffff url(http://cha.pmself.com/images/kyinyon/pic/it.png);
                box-shadow: 1px 1px 5px #BCBEBE;

                .box-two {
                    width: 261rpx;
                    justify-content: space-between;
                    margin-bottom: 36rpx;
                    padding-right: 1rpx;

                    .text012 {
                        margin-top: 6rpx;
                        font-size: 28rpx;
                        line-height: 28rpx;
                        font-weight: 600;
                        color: #000000;
                    }

                    .pic002 {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 20rpx;
                    }
                }

                .text016 {
                    width: 262rpx;
                    margin-bottom: 6rpx;
                    font-size: 24rpx;
                    line-height: 28rpx;
                    font-weight: 600;
                    color: #000000;
                }

                .text02 {
                    width: 188rpx;
                    margin-bottom: 24rpx;
                    font-size: 20rpx;
                    line-height: 28rpx;
                    color: #a5a1a1;
                }

                .text017 {
                    width: 262rpx;
                    margin-bottom: 8rpx;
                    font-size: 24rpx;
                    line-height: 28rpx;
                    font-weight: 600;
                    color: #000000;
                }

                .text04 {
                    width: 188rpx;
                    font-size: 20rpx;
                    line-height: 28rpx;
                    color: #a5a1a1;
                }
            }
        }

        .wrapper-three {
            width: 670rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;

            .ka3 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #C1EAEC url(http://cha.pmself.com/images/kyinyon/pic/xingzuo.jpg);
                background-size: 100% 100%;
                box-shadow: 1px 2px 5px #BCBEBE;
            }

            .wraper-col {
                width: 320rpx;

                .ka4 {
                    width: 100%;
                    height: 144rpx;
                    margin-bottom: 30rpx;
                    border-radius: 40rpx;
                    background: #ffffff url(http://cha.pmself.com/images/kyinyon/pic/yangshi.jpg);
                    background-size: 100% 100%;
                    box-shadow: 1px 1px 5px #BCBEBE;
                }

                .ka5 {
                    width: 100%;
                    height: 146rpx;
                    border-radius: 40rpx;
                    background: #ffffff url(http://cha.pmself.com/images/kyinyon/pic/jinnang2022.jpg);
                    background-size: 100% 100%;
                    box-shadow: 1px 1px 5px #BCBEBE;
                }
            }
        }

        .wrapper-four {
            width: 670rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;

            .ka6 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #BCBEBE url(http://cha.pmself.com/images/kyinyon/pic/shici.jpg);
                background-size: 100% 100%;
                box-shadow: 1px 2px 5px #BCBEBE;
            }

            .ka7 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #C1EAEC url(http://cha.pmself.com/images/kyinyon/pic/hmz_b.jpg);
                background-size: 100% 100%;
                box-shadow: 1px 1px 5px #BCBEBE;
            }
        }

        .ka8 {
            width: 670rpx;
            margin-right: auto;
            margin-bottom: 40rpx;
            margin-left: auto;
            padding: 98rpx 0rpx 48rpx 25rpx;
            border-radius: 40rpx;
            background: #ffffff url(http://cha.pmself.com/images/kyinyon/pic/xinqing.png);
            box-shadow: 1px 2px 5px #BCBEBE;

            .text021 {
                width: 332rpx;
                margin-bottom: 10rpx;
                font-size: 28rpx;
                line-height: 28rpx;
                font-weight: 600;
                color: #000000;
            }

            .text {
                width: 384rpx;
                margin-bottom: 32rpx;
                font-size: 24rpx;
                line-height: 28rpx;
                color: #b2aeae;
            }

            .text-two {
                width: 288rpx;
                font-size: 24rpx;
                line-height: 28rpx;
                color: #a39f9f;
            }

            .pic003 {
                width: 40rpx;
                height: 40rpx;
                border-radius: 40rpx;
                top: 30rpx;
                left: 24rpx;
                position: absolute;
            }

            .text019 {
                top: 36rpx;
                left: 84rpx;
                font-size: 28rpx;
                position: absolute;
                line-height: 28rpx;
                font-weight: 700;
                color: #000000;
            }

            .pic002-two {
                width: 160rpx;
                height: 160rpx;
                border-radius: 20rpx;
                bottom: 70rpx;
                right: 90rpx;
                box-shadow: 1px 2px 5px #BCBEBE;
                position: absolute;
            }
        }

        .text035 {
            width: 128rpx;
            margin: 0rpx 0rpx 40rpx 26rpx;
            font-size: 32rpx;
            font-weight: 700;
        }

        .wrapper-five {
            width: 670rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;

            .ka9 {
                width: 320rpx;
                height: 320rpx;
                padding: 20rpx 0rpx 0rpx 18rpx;
                border-radius: 40rpx;
                background: #E5625A;
                box-shadow: 1px 2px 5px #BCBEBE;

                .pic0006 {
                    width: 282rpx;
                    height: 180rpx;
                    border-radius: 40rpx;
                }

                .text022 {
                    bottom: 46rpx;
                    left: 20rpx;
                    font-size: 28rpx;
                    position: absolute;
                    line-height: 28rpx;
                    color: #ffffff;
                }
            }

            .ka10 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #C1EAEC url(http://cha.pmself.com/images/kyinyon/pic/qmad.jpg);
                background-size: 100% 100%;
                box-shadow: 1px 1px 5px #BCBEBE;
            }
        }

        .ka11 {
            width: 670rpx;
            height: 310rpx;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;
            padding: 24rpx 0rpx 0rpx 24rpx;
            border-radius: 40rpx;
            background: #9DA1EB;
            box-shadow: 1px 2px 5px #BCBEBE;

            .wraper-row-five {
                width: 576rpx;
                margin-bottom: 10rpx;

                .box-three {
                    width: 252rpx;
                    margin-right: 104rpx;

                    .box-row {
                        width: 172rpx;
                        justify-content: space-between;
                        margin-bottom: 44rpx;

                        .pic009 {
                            width: 40rpx;
                            height: 40rpx;
                            border-radius: 40rpx;
                        }

                        .text025 {
                            margin-top: 6rpx;
                            font-size: 28rpx;
                            line-height: 28rpx;
                            font-weight: 700;
                            color: #ffffff;
                        }
                    }

                    .text026 {
                        font-size: 36rpx;
                        line-height: 28rpx;
                        color: #ffffff;
                    }
                }

                .icon20 {
                    width: 100rpx;
                    height: 100rpx;
                    margin: 22rpx 20rpx 0rpx 0rpx;
                    border-radius: 20rpx;
                    box-shadow: 1px 2px 5px #BCBEBE;
                }

                .icon21 {
                    width: 100rpx;
                    height: 100rpx;
                    margin-top: 22rpx;
                    border-radius: 20rpx;
                    box-shadow: 1px 2px 5px #BCBEBE;
                }
            }

            .wraper-row-six {
                width: 576rpx;

                .text027 {
                    margin-right: 156rpx;
                    font-size: 24rpx;
                    line-height: 28rpx;
                    color: #ffffff;
                    outline: 0rpx;
                }

                .icon22 {
                    width: 100rpx;
                    height: 100rpx;
                    margin: 10rpx 20rpx 0rpx 0rpx;
                    border-radius: 20rpx;
                    box-shadow: 1px 2px 5px #BCBEBE;
                }

                .icon23 {
                    width: 100rpx;
                    height: 100rpx;
                    margin-top: 10rpx;
                    border-radius: 20rpx;
                    box-shadow: 1px 2px 5px #BCBEBE;
                }
            }

            .wraper-row-seven {
                width: 200rpx;
                padding: 9rpx 0rpx 13rpx 0rpx;
                border-radius: 40rpx;
                bottom: 40rpx;
                left: 40rpx;
                background: #ffffff;
                position: absolute;
                text-align: center;

                .text028 {
                    font-size: 24rpx;
                    line-height: 28rpx;
                    color: #9DA1EB;
                }
            }
        }

        .ka12 {
            width: 670rpx;
            height: 310rpx;
            margin-right: auto;
            margin-bottom: 40rpx;
            margin-left: auto;
            padding: 24rpx 0rpx 0rpx 30rpx;
            border-radius: 40rpx;
            background: #ffffff url(http://cha.pmself.com/images/kyinyon/pic/chan.png);
            box-shadow: 1px 2px 5px #BCBEBE;

            .wraper-row-eight {
                width: 178rpx;
                justify-content: space-between;
                margin-bottom: 40rpx;

                .pic009 {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 40rpx;
                }

                .text030 {
                    margin-top: 6rpx;
                    font-size: 28rpx;
                    line-height: 28rpx;
                    font-weight: 700;
                }
            }

            .wraper-row-nine {
                width: 550rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 16rpx 20rpx;
                padding-right: 2rpx;

                .icon13 {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 20rpx;
                    box-shadow: 1px 2px 5px #BCBEBE;
                }

                .icon14 {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 20rpx;
                    box-shadow: 11px 2px 5px #BCBEBEpx 1px 2px #EFF1F9;
                }
            }

            .wraper-row-ten {
                width: 562rpx;
                justify-content: space-between;
                margin: 1rpx 0rpx 0rpx 14rpx;
                padding-right: 2rpx;

                .text039 {
                    font-size: 28rpx;
                    line-height: 28rpx;
                }
            }
        }

        .wrapper-six {
            width: 670rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;

            .ka14 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #fff url(http://cha.pmself.com/images/kyinyon/pic/kaixin001.jpg);
                background-size: 100% 100%;
                box-shadow: 1px 2px 5px #BCBEBE;
            }

            .ka13 {
                width: 320rpx;
				height: 320rpx;
                padding: 100rpx 0rpx 58rpx 28rpx;
                border-radius: 40rpx;
                background: #C1EAEC;
                box-shadow: 1px 1px 5px #BCBEBE;

                .box-four {
                    width: 250rpx;
                    justify-content: space-between;
                    margin: 0rpx 0rpx 24rpx 2rpx;

                    .icon18 {
                        width: 110rpx;
                        height: 110rpx;
                        border-radius: 20rpx;
                        box-shadow: 1px 2px 5px #BCBEBE;
                    }
                }

                .box-five {
                    width: 239rpx;
                    justify-content: space-between;
                    padding-right: 1rpx;

                    .text039 {
                        font-size: 28rpx;
                        line-height: 28rpx;
                    }
                }
            }
        }

        .wrapper-seven {
            width: 670rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;

            .ka15 {
                width: 320rpx;
				height: 320rpx;
                padding: 30rpx 0rpx 40rpx 29rpx;
                border-radius: 40rpx;
                background: #9DA1EB;
                box-shadow: 1px 2px 5px #BCBEBE;

                .box-six {
                    width: 249rpx;
                    justify-content: space-between;
                    margin: 0rpx 0rpx 30rpx 2rpx;
                    padding-right: 1rpx;

                    .icon18 {
                        width: 110rpx;
                        height: 110rpx;
                        border-radius: 20rpx;
                        box-shadow: 1px 2px 5px #BCBEBE;
                    }

                    .text040 {
                        margin-top: 82rpx;
                        font-size: 28rpx;
                        line-height: 28rpx;
                    }
                }

                .box-seven {
                    width: 251rpx;
                    justify-content: space-between;
                    padding-right: 1rpx;

                    .text039 {
                        font-size: 28rpx;
                        line-height: 28rpx;
                    }

                    .icon18 {
                        width: 110rpx;
                        height: 110rpx;
                        border-radius: 20rpx;
                        box-shadow: 1px 2px 5px #BCBEBE;
                    }
                }
            }

            .ka16 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #eef1ef url(http://cha.pmself.com/images/kyinyon/pic/zhongyi.jpg);
                background-size: 100% 100%;
                box-shadow: 1px 1px 5px #BCBEBE;
            }
        }

        .wrapper-eight {
            width: 670rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-left: auto;

            .ka17 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #BCBEBE url(http://cha.pmself.com/images/kyinyon/pic/kaixin002.jpg);
                background-size: 100% 100%;
                box-shadow: 1px 2px 5px #BCBEBE;
            }

            .ka18 {
                width: 320rpx;
                height: 320rpx;
                border-radius: 40rpx;
                background: #FCEEE1 url(http://cha.pmself.com/images/kyinyon/pic/ymi.jpg);
                background-size: 100% 100%;
                background-position: 0% 0%;
                box-shadow: 1px 1px 5px #BCBEBE;
            }
        }

        .txt02 {
            top: 466rpx;
            left: 50rpx;
            font-size: 32rpx;
            position: absolute;
            font-weight: 700;
        }
    }
</style>
<script>
	export default{
		data(){
			return{
				term:[],
				posts:[],
				pages:0,
				paged:1,
				loadingStatus:true,
				loadmore:'waiting',
				loadLocked:false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: "#000000",	//文字颜色
				backgroundColor: "#ffffff"	//底部背景色
			})
			uni.setNavigationBarTitle({
				title:this.opt.mNames.shop_name
			})
		},
		computed:{
			opt(){
				return this.$store.state.opt
			}
		},
		onShareAppMessage(res){
			return {
			  title: this.opt.mNames.shop_name,
			  path: '/pages/shop/index'
			}
		},


	}
</script>
```

\[/content\_hide\]

**Categories:** Uniapp

---