### [UNIapp 切片，便民查询代码参考备份1](https://pmself.com/article/2219)

**Published:** 2023-05-27T08:16:49

**Author:** pmself

**Excerpt:** 便民查询页面VUE.js代码参考： 完整的vue.js代码如下：

便民查询页面VUE.js代码参考：

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

完整的vue.js代码如下：

\[content\_hide\]

```
<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>
```

\[/content\_hide\]

**Categories:** Uniapp

---