便民查询页面VUE.js代码参考：
完整的vue.js代码如下：
<template>
<view class="flex-col homepage">
<view class="flex-col wrapper">
<text class="text">
今日新发现
</text>
<view class="flex-row wraper-row">
<navigator url="/pages/web-view/web-view?url=https://top.baidu.com/board"><image class="img" src="http://cha.pmself.com/images/chaxun/baidu.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://s.weibo.com/top/summary?cate=realtimehot&uc_biz_str=OPT%3ABACK_BTN_STYLE%400%7COPT%3ATOOLBAR_STYLE%401"><image class="img-two" src="http://cha.pmself.com/images/chaxun/weibo2.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.toutiao.com/?W2atIF=1"><image class="img-three" src="http://cha.pmself.com/images/chaxun/toutiao.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://tophub.today/n/DpQvNABoNE"><image class="img-four" src="http://cha.pmself.com/images/chaxun/douyin.png"></image></navigator>
</view>
<view class="flex-row wraper-row-two">
<text class="text-two">
<navigator url="/pages/web-view/web-view?url=https://top.baidu.com/board">百度热搜</navigator>
</text> <text class="text-three">
<navigator url="/pages/web-view/web-view?url=https://s.weibo.com/top/summary?cate=realtimehot&uc_biz_str=OPT%3ABACK_BTN_STYLE%400%7COPT%3ATOOLBAR_STYLE%401">微博热搜</navigator>
</text> <text class="text-four">
<navigator url="/pages/web-view/web-view?url=https://m.toutiao.com/?W2atIF=1">头条新闻</navigator>
</text> <text class="text-five">
<navigator url="/pages/web-view/web-view?url=https://tophub.today/n/DpQvNABoNE">抖音热榜</navigator>
</text>
</view>
</view>
<view class="flex-col wrapper-two">
<text class="text-six">
常用便民查询
</text>
<view class="flex-row wraper-row-three">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/third/transit"><image class="img-five" src="http://cha.pmself.com/images/chaxun/gongjiao.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E6%9F%A5%E5%BF%AB%E9%80%92"><image class="img-six" src="http://cha.pmself.com/images/chaxun/kuaidi.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/third/peccancy"><image class="img-seven" src="http://cha.pmself.com/images/chaxun/weizhang.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://touch.train.qunar.com/train_touch/index.html#/"><image class="img-eight" src="http://cha.pmself.com/images/chaxun/huoche.png"></image></navigator>
</view>
<view class="flex-row wraper-row-four">
<text class="text-seven">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/third/transit">查公交</navigator>
</text> <text class="text-eight">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E6%9F%A5%E5%BF%AB%E9%80%92">查快递</navigator>
</text> <text class="text-nine">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/third/peccancy">查违章</navigator>
</text> <text class="text-ten">
<navigator url="/pages/web-view/web-view?url=https://touch.train.qunar.com/train_touch/index.html#/">火车票</navigator>
</text>
</view>
<view class="flex-row wraper-row-five">
<navigator url="/pages/web-view/web-view?url=https://touch.qunar.com/h5/flight/?bd_source=hao12302&__rewrite=true"><image class="img-nine" src="http://cha.pmself.com/images/chaxun/feiji.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%A4%A9%E6%B0%94"><image class="img-ten" src="http://cha.pmself.com/images/chaxun/tianqi.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%8F%8C%E8%89%B2%E7%90%83"><image class="img-eleven" src="http://cha.pmself.com/images/chaxun/ssq.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E6%88%BF%E8%B4%B7%E8%AE%A1%E7%AE%97%E5%99%A8"><image class="img-twelve" src="http://cha.pmself.com/images/chaxun/fangdai.png"></image></navigator>
</view>
<view class="flex-row wraper-row-six">
<text class="text-eleven">
<navigator url="/pages/web-view/web-view?url=https://touch.qunar.com/h5/flight/?bd_source=hao12302&__rewrite=true">查航班</navigator>
</text> <text class="text-twelve">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%A4%A9%E6%B0%94">查天气</navigator>
</text> <text class="text-thirteen">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%8F%8C%E8%89%B2%E7%90%83">双色球</navigator>
</text> <text class="text-fourteen">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E6%88%BF%E8%B4%B7%E8%AE%A1%E7%AE%97%E5%99%A8">房贷计算</navigator>
</text>
</view>
</view>
<view class="flex-col wrapper-three">
<text class="text-fifteen">
新鲜有趣一览
</text>
<view class="flex-row wraper-row-seven">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E6%89%8B%E6%9C%BA%E5%A3%81%E7%BA%B8"><image class="img-thirteen" src="http://cha.pmself.com/images/chaxun/bizhi.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.hao123.com/sitecards/?pt=1"><image class="img-fourteen" src="http://cha.pmself.com/images/chaxun/doutu.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.youlai.cn/jijiu"><image class="img-fifteen" src="http://cha.pmself.com/images/chaxun/jijiu.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://web.shanbay.com/words/op/honor-words"><image class="img-sixteen" src="http://cha.pmself.com/images/chaxun/shanbei.png"></image></navigator>
</view>
<view class="flex-row wraper-row-eight">
<text class="text-sixteen">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E6%89%8B%E6%9C%BA%E5%A3%81%E7%BA%B8">手机壁纸</navigator>
</text> <text class="text-seventeen">
<navigator url="/pages/web-view/web-view?url=https://m.hao123.com/sitecards/?pt=1">斗图装X</navigator>
</text> <text class="text-eighteen">
<navigator url="/pages/web-view/web-view?url=https://m.youlai.cn/jijiu">有来急救</navigator>
</text> <text class="text-nineteen">
<navigator url="/pages/web-view/web-view?url=https://web.shanbay.com/words/op/honor-words">扇贝记单词</navigator>
</text>
</view>
<view class="flex-row wraper-row-nine">
<navigator url="/pages/web-view/web-view?url=https://h5.codefuture.top/widgetbox-h5/quickcard/poetry"><image class="img-seventeen" src="http://cha.pmself.com/images/chaxun/shici2.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://ask.dxy.com/index#/activity/honor?dxa_adplatform=honorcardh5&position=1"><image class="img-eighteen" src="http://cha.pmself.com/images/chaxun/dingxiang.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.smzdm.com/top/?scene=deeplink/"><image class="img-nineteen" src="http://cha.pmself.com/images/chaxun/zdm.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/sf/vsearch?pd=image_content&atn=page&fr=tab&tn=vsearch&ss=100&sa=tb&rsv_sug4=1512&oq=%E7%BE%8E%E5%A5%B3&word=%E7%BE%8E%E5%A5%B3"><image class="img-twenty" src="http://cha.pmself.com/images/chaxun/meinv.png"></image></navigator>
</view>
<view class="flex-row wraper-row-ten">
<text class="text-twenty">
<navigator url="/pages/web-view/web-view?url=https://h5.codefuture.top/widgetbox-h5/quickcard/poetry">诗词卡片</navigator>
</text> <text class="text-20">
<navigator url="/pages/web-view/web-view?url=https://ask.dxy.com/index#/activity/honor?dxa_adplatform=honorcardh5&position=1">丁香大实话</navigator>
</text> <text class="text-21">
<navigator url="/pages/web-view/web-view?url=https://m.smzdm.com/top/?scene=deeplink/">好物值得买</navigator>
</text> <text class="text-22">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/sf/vsearch?pd=image_content&atn=page&fr=tab&tn=vsearch&ss=100&sa=tb&rsv_sug4=1512&oq=%E7%BE%8E%E5%A5%B3&word=%E7%BE%8E%E5%A5%B3">美女图片</navigator>
</text>
</view>
</view>
<view class="flex-col wrapper-four">
<text class="text-23">
快递服务查询
</text>
<view class="flex-row wraper-row-eleven">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E9%A1%BA%E9%A3%8E%E5%BF%AB%E9%80%92"><image class="img-20" src="http://cha.pmself.com/images/chaxun/shunfeng.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%9C%86%E9%80%9A%E5%BF%AB%E9%80%92"><image class="img-21" src="http://cha.pmself.com/images/chaxun/yuantong.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E7%94%B3%E9%80%9A%E5%BF%AB%E9%80%92"><image class="img-22" src="http://cha.pmself.com/images/chaxun/shentong.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E9%9F%B5%E8%BE%BE%E5%BF%AB%E9%80%92"><image class="img-23" src="http://cha.pmself.com/images/chaxun/yunda.png"></image></navigator>
</view>
<view class="flex-row wraper-row-twelve">
<text class="text-24">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E9%A1%BA%E9%A3%8E%E5%BF%AB%E9%80%92">顺风快递</navigator>
</text> <text class="text-25">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%9C%86%E9%80%9A%E5%BF%AB%E9%80%92">圆通快递</navigator>
</text> <text class="text-26">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E7%94%B3%E9%80%9A%E5%BF%AB%E9%80%92">申通快递</navigator>
</text> <text class="text-27">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E9%9F%B5%E8%BE%BE%E5%BF%AB%E9%80%92">韵达快递</navigator>
</text>
</view>
<view class="flex-row wraper-row-thirteen">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E4%BA%AC%E4%B8%9C%E5%BF%AB%E9%80%92"><image class="img-24" src="http://cha.pmself.com/images/chaxun/jdkd.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%BE%B7%E9%82%A6%E5%BF%AB%E9%80%92"><image class="img-25" src="http://cha.pmself.com/images/chaxun/debang.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E9%82%AE%E6%94%BF%E5%BF%AB%E9%80%92"><image class="img-26" src="http://cha.pmself.com/images/chaxun/youzheng.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://www.ip138.com/tel.htm"><image class="img-27" src="http://cha.pmself.com/images/chaxun/dianhua.png"></image></navigator>
</view>
<view class="flex-row wraper-row-fourteen">
<text class="text-28">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E4%BA%AC%E4%B8%9C%E5%BF%AB%E9%80%92">京东快递</navigator>
</text> <text class="text-29">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E5%BE%B7%E9%82%A6%E5%BF%AB%E9%80%92">德邦快递</navigator>
</text> <text class="text-30">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/ssid=204c637261776c70773408/s?word=%E9%82%AE%E6%94%BF%E5%BF%AB%E9%80%92">邮政快递</navigator>
</text> <text class="text-31">
<navigator url="/pages/web-view/web-view?url=https://www.ip138.com/tel.htm">便民电话</navigator>
</text>
</view>
</view>
<view class="flex-col wrapper-five">
<text class="text-32">
我的附近区域
</text>
<view class="flex-row wraper-row-fifteen">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/more/?fromhash=1"><image class="img-28" src="http://cha.pmself.com/images/chaxun/fujin.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index"><image class="img-29" src="http://cha.pmself.com/images/chaxun/meishi.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index"><image class="img-30" src="http://cha.pmself.com/images/chaxun/jiudian.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index"><image class="img-31" src="http://cha.pmself.com/images/chaxun/dianying.png"></image></navigator>
</view>
<view class="flex-row wraper-row-sixteen">
<text class="text-33">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/more/?fromhash=1">查附近</navigator>
</text> <text class="text-34">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index">美食</navigator>
</text> <text class="text-35">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index">酒店</navigator>
</text> <text class="text-36">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index">电影</navigator>
</text>
</view>
<view class="flex-row wraper-row-seventeen">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/moretravel"><image class="img-32" src="http://cha.pmself.com/images/chaxun/fujin.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index"><image class="img-33" src="http://cha.pmself.com/images/chaxun/yinhang.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index"><image class="img-34" src="http://cha.pmself.com/images/chaxun/yiyuan.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index"><image class="img-35" src="http://cha.pmself.com/images/chaxun/jigndian.png"></image></navigator>
</view>
<view class="flex-row wraper-row-eighteen">
<text class="text-37">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/moretravel">查出行</navigator>
</text> <text class="text-38">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index">银行</navigator>
</text> <text class="text-39">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index">医院</navigator>
</text> <text class="text-40">
<navigator url="/pages/web-view/web-view?url=https://map.baidu.com/mobile/webapp/index/index">景点</navigator>
</text>
</view>
</view>
<view class="flex-col wrapper-six">
<text class="text-41">
其他类别
</text>
<image class="img-36" src="http://cha.pmself.com/images/chaxun/it.png"></image></navigator>
<image class="img-37" src="http://cha.pmself.com/images/chaxun/sina.png"></image></navigator>
<image class="img-38" src="http://cha.pmself.com/images/chaxun/huanqiu.png"></image></navigator>
<image class="img-39" src="http://cha.pmself.com/images/chaxun/zhibo8.png"></image></navigator>
<view class="flex-row wraper-row-nineteen">
<text class="text-42">
<navigator url="/pages/web-view/web-view?url=https://img.ithome.com/app/calendar/event_list.html">IT事件日历</navigator>
</text> <text class="text-43">
<navigator url="/pages/web-view/web-view?url=https://finance.sina.cn/honor/set.shtml#/hq/">新浪行情</navigator>
</text> <text class="text-44">
<navigator url="/pages/web-view/web-view?url=https://m.zhibo8.cc/news/web/zuqiu/2022-12-05/match878160date2022v.htm">直播8</navigator>
</text> <text class="text-45">
<navigator url="/pages/web-view/web-view?url=https://3w.huanqiu.com/">环球国际</navigator>
</text>
</view>
</view>
<view class="flex-col wrapper-four">
<text class="text-23">
民俗星座查询
</text>
<view class="flex-row wraper-row-eleven">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E7%94%9F%E8%82%96"><image class="img-20" src="http://cha.pmself.com/images/chaxun/shengxiao.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E8%A7%A3%E6%A2%A6"><image class="img-21" src="http://cha.pmself.com/images/chaxun/meng.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E6%98%9F%E5%BA%A7"><image class="img-22" src="http://cha.pmself.com/images/chaxun/xingzuo2.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=24%E8%8A%82%E6%B0%94"><image class="img-23" src="http://cha.pmself.com/images/chaxun/24jieqi.png"></image></navigator>
</view>
<view class="flex-row wraper-row-twelve">
<text class="text-24">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E7%94%9F%E8%82%96">十二生肖</navigator>
</text> <text class="text-25">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E8%A7%A3%E6%A2%A6">周公解梦</navigator>
</text> <text class="text-26">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=%E6%98%9F%E5%BA%A7">星座图谱</navigator>
</text> <text class="text-27">
<navigator url="/pages/web-view/web-view?url=https://m.baidu.com/from=1020854c/s?word=24%E8%8A%82%E6%B0%94">节气查询</navigator>
</text>
</view>
<view class="flex-row wraper-row-thirteen">
<navigator url="/pages/web-view/web-view?url=http://sm.fatelist.com/?ac=xydd"><image class="img-24" src="http://cha.pmself.com/images/chaxun/qfdd.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=http://dsqm.fatelist.com/?ac=dashi"><image class="img-25" src="http://cha.pmself.com/images/chaxun/qiming.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam"><image class="img-26" src="http://cha.pmself.com/images/chaxun/xlcs.png"></image></navigator>
<navigator url="/pages/web-view/web-view?url=https://m.youlai.cn/jijiu"><image class="img-27" src="http://cha.pmself.com/images/chaxun/jijiu.png"></image></navigator>
</view>
<view class="flex-row wraper-row-fourteen">
<text class="text-28">
<navigator url="/pages/web-view/web-view?url=http://sm.fatelist.com/?ac=xydd">祈福点灯</navigator>
</text> <text class="text-29">
<navigator url="/pages/web-view/web-view?url=http://dsqm.fatelist.com/?ac=dashi">从龙起名</navigator>
</text> <text class="text-30">
<navigator url="/pages/web-view/web-view?url=http://xlcs.biuhealth.com/Exam">心理评测</navigator>
</text> <text class="text-31">
<navigator url="/pages/web-view/web-view?url=https://m.youlai.cn/jijiu">有来急救</navigator>
</text>
</view>
</view>
</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: 41rpx 24rpx 0rpx 24rpx;
.wrapper {
width: 100%;
margin-bottom: 24rpx;
padding: 30rpx 0rpx 40rpx 40.2rpx;
border-width: 2rpx;
border-style: solid;
border-color: #f8f7f7;
border-radius: 20rpx;
background: #F6F6F4;
.text {
width: 140rpx;
margin-bottom: 24rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.wraper-row {
width: 578rpx;
justify-content: space-between;
margin: 0rpx 0rpx 14rpx 20rpx;
padding-right: 2rpx;
.img {
width: 100rpx;
height: 100rpx;
margin-top: 4rpx;
border-radius: 60rpx;
}
.img-two {
width: 96rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-three {
width: 96rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-four {
width: 96rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-two {
width: 577rpx;
justify-content: space-between;
margin-left: 20rpx;
padding-right: 3rpx;
.text-two {
font-size: 24rpx;
line-height: 28rpx;
}
.text-three {
font-size: 24rpx;
line-height: 28rpx;
}
.text-four {
font-size: 24rpx;
line-height: 28rpx;
}
.text-five {
font-size: 24rpx;
line-height: 28rpx;
}
}
}
.wrapper-two {
width: 100%;
height: 450rpx;
margin-bottom: 24rpx;
padding: 30rpx 0rpx 0rpx 41rpx;
border-radius: 20rpx;
background: #ffffff;
.text-six {
width: 168rpx;
margin-bottom: 24rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.wraper-row-three {
width: 580.2rpx;
justify-content: space-between;
margin: 0rpx 0rpx 10rpx 18rpx;
padding-right: 4.2rpx;
.img-five {
width: 100rpx;
height: 100rpx;
margin-top: 6rpx;
border-radius: 60rpx;
}
.img-six {
width: 100rpx;
height: 100rpx;
margin-top: 6rpx;
border-radius: 60rpx;
}
.img-seven {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-eight {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-four {
width: 552.2rpx;
justify-content: space-between;
margin: 0rpx 0rpx 30rpx 32rpx;
padding-right: 4.2rpx;
.text-seven {
font-size: 24rpx;
line-height: 28rpx;
}
.text-eight {
font-size: 24rpx;
line-height: 28rpx;
}
.text-nine {
font-size: 24rpx;
line-height: 28rpx;
}
.text-ten {
font-size: 24rpx;
line-height: 28rpx;
}
}
.wraper-row-five {
width: 580.2rpx;
justify-content: space-between;
margin: 0rpx 0rpx 16rpx 18rpx;
padding-right: 4.2rpx;
.img-nine {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-ten {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-eleven {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-twelve {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-six {
width: 567.2rpx;
justify-content: space-between;
margin: 1rpx 0rpx 0rpx 32rpx;
padding-right: 3.2rpx;
.text-eleven {
font-size: 24rpx;
line-height: 28rpx;
}
.text-twelve {
font-size: 24rpx;
line-height: 28rpx;
}
.text-thirteen {
font-size: 24rpx;
line-height: 28rpx;
}
.text-fourteen {
width: 100rpx;
font-size: 24rpx;
line-height: 28rpx;
}
}
}
.wrapper-three {
width: 100%;
margin-bottom: 24rpx;
padding: 30rpx 0rpx 31rpx 41rpx;
border-radius: 20rpx;
background: #ffffff;
.text-fifteen {
width: 168rpx;
margin-bottom: 30rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.wraper-row-seven {
width: 585rpx;
justify-content: space-between;
margin: 0rpx 0rpx 24rpx 20rpx;
padding-right: 1rpx;
.img-thirteen {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-fourteen {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-fifteen {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-sixteen {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-eight {
width: 595rpx;
justify-content: space-between;
margin: 0rpx 0rpx 36rpx 20rpx;
padding-right: 1rpx;
.text-sixteen {
width: 100rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-seventeen {
font-size: 24rpx;
line-height: 28rpx;
}
.text-eighteen {
width: 100rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-nineteen {
font-size: 24rpx;
line-height: 28rpx;
}
}
.wraper-row-nine {
width: 580rpx;
justify-content: space-between;
margin: 0rpx 0rpx 14rpx 20rpx;
padding-right: 1rpx;
.img-seventeen {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-eighteen {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-nineteen {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-twenty {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-ten {
width: 581rpx;
justify-content: space-between;
margin-left: 20rpx;
padding-right: 2rpx;
.text-twenty {
width: 100rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-20 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-21 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-22 {
width: 100rpx;
font-size: 24rpx;
line-height: 28rpx;
}
}
}
.wrapper-four {
width: 100%;
margin-bottom: 24rpx;
padding: 30rpx 0rpx 39rpx 41rpx;
border-radius: 20rpx;
background: #ffffff;
.text-23 {
width: 168rpx;
margin-bottom: 30rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.wraper-row-eleven {
width: 581rpx;
justify-content: space-between;
margin: 0rpx 0rpx 12rpx 18rpx;
padding-right: 1rpx;
.img-20 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-21 {
width: 96rpx;
height: 100rpx;
margin-top: 2rpx;
border-radius: 60rpx;
}
.img-22 {
width: 96rpx;
height: 100rpx;
margin-top: 2rpx;
border-radius: 60rpx;
}
.img-23 {
width: 96rpx;
height: 100rpx;
margin-top: 2rpx;
border-radius: 60rpx;
}
}
.wraper-row-twelve {
width: 581rpx;
justify-content: space-between;
margin: 0rpx 0rpx 40rpx 20rpx;
padding-right: 1rpx;
.text-24 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-25 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-26 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-27 {
font-size: 24rpx;
line-height: 28rpx;
}
}
.wraper-row-thirteen {
width: 581rpx;
justify-content: space-between;
margin: 0rpx 0rpx 12rpx 20rpx;
.img-24 {
width: 96rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-25 {
width: 96rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-26 {
width: 96rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-27 {
width: 96rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-fourteen {
width: 580rpx;
justify-content: space-between;
margin-left: 20rpx;
.text-28 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-29 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-30 {
font-size: 24rpx;
line-height: 28rpx;
}
.text-31 {
font-size: 24rpx;
line-height: 28rpx;
}
}
}
.wrapper-five {
width: 100%;
margin-bottom: 24rpx;
padding: 30rpx 0rpx 41rpx 40rpx;
border-radius: 20rpx;
background: #ffffff;
.text-32 {
width: 168rpx;
margin-bottom: 30rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.wraper-row-fifteen {
width: 582rpx;
justify-content: space-between;
margin: 0rpx 0rpx 16rpx 20rpx;
.img-28 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-29 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-30 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-31 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-sixteen {
width: 544rpx;
margin: 0rpx 0rpx 32rpx 32rpx;
.text-33 {
margin-right: 96rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-34 {
margin-right: 120rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-35 {
margin-right: 112rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-36 {
font-size: 24rpx;
line-height: 28rpx;
}
}
.wraper-row-seventeen {
width: 582rpx;
justify-content: space-between;
margin: 0rpx 0rpx 16rpx 20rpx;
.img-32 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-33 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-34 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
.img-35 {
width: 100rpx;
height: 100rpx;
border-radius: 60rpx;
}
}
.wraper-row-eighteen {
width: 544rpx;
margin-left: 32rpx;
.text-37 {
margin-right: 94rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-38 {
margin-right: 120rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-39 {
margin-right: 112rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-40 {
font-size: 24rpx;
line-height: 28rpx;
}
}
}
.wrapper-six {
width: 100%;
height: 294rpx;
padding: 30rpx 0rpx 0rpx 40rpx;
border-radius: 20rpx;
background: #ffffff;
.text-41 {
width: 112rpx;
margin-bottom: 30rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.img-36 {
width: 100rpx;
height: 100rpx;
margin: 0rpx 0rpx -100rpx 20rpx;
border-radius: 60rpx;
}
.img-37 {
width: 100rpx;
height: 100rpx;
margin: 0rpx 0rpx -100rpx 176rpx;
border-radius: 60rpx;
}
.img-38 {
width: 100rpx;
height: 100rpx;
margin: 0rpx 0rpx -100rpx 502rpx;
border-radius: 60rpx;
}
.img-39 {
width: 100rpx;
height: 100rpx;
margin: 0rpx 0rpx 16rpx 338rpx;
border-radius: 60rpx;
}
.wraper-row-nineteen {
width: 587rpx;
margin-left: 10rpx;
.text-42 {
margin-right: 46rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-43 {
width: 100rpx;
margin-right: 84rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-44 {
margin-right: 80rpx;
font-size: 24rpx;
line-height: 28rpx;
}
.text-45 {
width: 100rpx;
font-size: 24rpx;
line-height: 28rpx;
}
}
}
}
</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.circle_name
})
},
computed:{
opt(){
return this.$store.state.opt
}
},
onShareAppMessage(res){
return {
title: this.opt.mNames.circle_name,
path: '/pages/circle/index'
}
},
}
</script>