卡片服务快应用VUE.js代码参考：
完整的vue.js代码如下：
<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>
发表回复
要发表评论，您必须先登录。