|
@@ -1,94 +1,99 @@
|
|
|
<template>
|
|
|
- <view class="page">
|
|
|
- <view class="wd">
|
|
|
- <view class="qw">{{ weather.tem }}°</view>
|
|
|
- <view class="xs">
|
|
|
- <view>{{ weather.wea }} {{ weather.win }} {{ weather.win_speed }}</view>
|
|
|
- <view>风速 {{ weather.win_meter }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ms">
|
|
|
- <text class="icon"></text>
|
|
|
- <text>谢通门县欢迎您</text>
|
|
|
- <view class="sos" @click="call()">
|
|
|
- <text class="icon"></text>
|
|
|
- 求助
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <view class="welcome" :style="{ marginTop: top + 'px' }">
|
|
|
+ <image src="../../static/dw.png" mode="widthFix" class="dw"></image>
|
|
|
+ <image src="../../static/index.png" mode="widthFix" class="bq"></image>
|
|
|
+ <view class="clear"></view>
|
|
|
</view>
|
|
|
- <view class="top"><image :src="ip + aboutUs.bgImg1" mode="aspectFill"></image></view>
|
|
|
- <view class="flex menu">
|
|
|
- <view class="f" @click="navigate('/pages/travel/detail?id=43')">
|
|
|
- <image src="../../static/icon3.png" mode="widthFix" class="icon1"></image>
|
|
|
- <view class="title">谢通门介绍</view>
|
|
|
- </view>
|
|
|
- <view class="f" @click="navigate('/pages/travel/introduction')">
|
|
|
- <image src="../../static/icon1.png" mode="widthFix" class="icon1"></image>
|
|
|
- <view class="title">旅游攻略</view>
|
|
|
- </view>
|
|
|
- <view class="f" @click="navigate('/pages/government/activity')">
|
|
|
- <image src="../../static/icon2.png" mode="widthFix" class="icon1"></image>
|
|
|
- <view class="title">热门活动</view>
|
|
|
- </view>
|
|
|
- <view class="f" @click="navigate('/pages/government/index')">
|
|
|
- <image src="../../static/icon4.png" mode="widthFix" class="icon1"></image>
|
|
|
- <view class="title">党政服务</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="flex" style="margin-top: 10px;">
|
|
|
- <view class="f" style="padding-right:8px;">
|
|
|
- <image @click="detail(2)" :src="ip + aboutUs.bgImg2" style="height: 164px;width: 100%;border-radius: 5px;" mode="aspectFill"></image>
|
|
|
+ <view class="top">
|
|
|
+ <view class="wd">
|
|
|
+ <view class="qw">{{ weather.tem }}°</view>
|
|
|
+ <view class="xs">
|
|
|
+ <view>{{ weather.wea }} {{ weather.win }} {{ weather.win_speed }}</view>
|
|
|
+ <view>风速 {{ weather.win_meter }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="f">
|
|
|
- <image @click="detail(3)" :src="ip + aboutUs.bgImg3" style="height: 77px;width: 100%;border-radius: 5px;" mode="aspectFill"></image>
|
|
|
- <image @click="detail(4)" :src="ip + aboutUs.bgImg4" style="height: 77px;width: 100%;margin-top: 5px;border-radius: 5px;" mode="aspectFill"></image>
|
|
|
+ <view class="sos" @click="call()">
|
|
|
+ <image src="../../static/qz.png" mode="widthFix"></image>
|
|
|
+ <view class="title">求助</view>
|
|
|
</view>
|
|
|
+ <image :src="ip + aboutUs.bgImg1" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
- <view class="it">
|
|
|
- <view class="v_title">
|
|
|
- <image src="../../static/lo.png" class="lo" mode="widthFix"></image>
|
|
|
- <view class="hd">热门景区</view>
|
|
|
- <view class="more" @click="tab('/pages/travel/index')">
|
|
|
- 更多
|
|
|
- <text class="arrow icon"></text>
|
|
|
+ <view class="page">
|
|
|
+ <view class="flex menu">
|
|
|
+ <view class="f" @click="navigate('/pages/travel/detail?id=43')">
|
|
|
+ <image src="../../static/icon1.png" mode="widthFix" class="icon1"></image>
|
|
|
+ <view class="title">谢通门介绍</view>
|
|
|
+ </view>
|
|
|
+ <view class="f" @click="navigate('/pages/travel/introduction')">
|
|
|
+ <image src="../../static/icon2.png" mode="widthFix" class="icon1"></image>
|
|
|
+ <view class="title">旅游攻略</view>
|
|
|
+ </view>
|
|
|
+ <view class="f" @click="navigate('/pages/government/activity')">
|
|
|
+ <image src="../../static/icon3.png" mode="widthFix" class="icon1"></image>
|
|
|
+ <view class="title">热门活动</view>
|
|
|
+ </view>
|
|
|
+ <view class="f" @click="navigate('/pages/government/index')">
|
|
|
+ <image src="../../static/icon4.png" mode="widthFix" class="icon1"></image>
|
|
|
+ <view class="title">党政服务</view>
|
|
|
</view>
|
|
|
- <view class="clear"></view>
|
|
|
</view>
|
|
|
- <view class="jq_item" v-for="(item, index) in hot_list" :key="index" @click="detail(item)">
|
|
|
- <image :src="ip + item.showPictures" class="bmg" mode="aspectFill"></image>
|
|
|
- <view class="cons">
|
|
|
- <view class="tit omit">{{ item.title }}</view>
|
|
|
- <view class="desc omit">{{ item.briefContent }}</view>
|
|
|
+ <view class="flex mt15">
|
|
|
+ <view class="f" style="padding-right:8px;">
|
|
|
+ <image @click="detail(3)" :src="ip + aboutUs.bgImg3" style="height: 77px;width: 100%;border-radius: 10px;" mode="widthFix"></image>
|
|
|
</view>
|
|
|
+ <view class="f"><image @click="detail(4)" :src="ip + aboutUs.bgImg4" style="height: 77px;width: 100%;border-radius: 10px;" mode="widthFix"></image></view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="it">
|
|
|
- <view class="v_title">
|
|
|
- <image src="../../static/lo.png" class="lo" mode="widthFix"></image>
|
|
|
- <view class="hd">攻略指南</view>
|
|
|
- <view class="more" @click="navigate('/pages/travel/introduction')">
|
|
|
- 更多
|
|
|
- <text class="arrow icon"></text>
|
|
|
+ <view style="margin-top: 10px;"><image @click="detail(2)" :src="ip + aboutUs.bgImg2" style="border-radius: 5px;width: 100%;" mode="widthFix"></image></view>
|
|
|
+ <!--热门景区-->
|
|
|
+ <view class="item">
|
|
|
+ <view class="lable">
|
|
|
+ <view class="title">热门景区</view>
|
|
|
+ <image src="../../static/lo2.png" mode="widthFix"></image>
|
|
|
+ <view class="look" @click="tab('/pages/travel/index')">
|
|
|
+ <text>更多</text>
|
|
|
+ <text class="icon"></text>
|
|
|
+ </view>
|
|
|
+ <view class="clear"></view>
|
|
|
+ </view>
|
|
|
+ <view class="rows">
|
|
|
+ <view class="row" v-for="(item, index) in hot_list" :key="index" @click="detail(item)">
|
|
|
+ <view class="out">
|
|
|
+ <view class="int">
|
|
|
+ <image :src="ip + item.showPictures" mode="scaleToFill"></image>
|
|
|
+ <view class="title omit">{{ item.title }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="clear"></view>
|
|
|
</view>
|
|
|
- <view class="clear"></view>
|
|
|
</view>
|
|
|
- <view class="jq_item flex" v-for="(item, index) in zn_list" :key="index" @click="detail(item)">
|
|
|
- <view class="f" style="height: 213px;border-radius: 5px 0px 0px 5px;"><image :src="ip + item.showPictures" mode="aspectFill"></image></view>
|
|
|
- <view class="f" style="padding: 10px;">
|
|
|
+ <!--攻略指南-->
|
|
|
+ <view class="item" style="margin-top: 15px;">
|
|
|
+ <view class="lable">
|
|
|
+ <view class="title">攻略指南</view>
|
|
|
+ <view class="look" @click="navigate('/pages/travel/introduction')">
|
|
|
+ <text>更多</text>
|
|
|
+ <text class="icon"></text>
|
|
|
+ </view>
|
|
|
+ <view class="clear"></view>
|
|
|
+ </view>
|
|
|
+ <view class="card" v-for="(item, index) in zn_list" :key="index" @click="detail(item)">
|
|
|
+ <image :src="ip + item.showPictures" mode="aspectFill"></image>
|
|
|
<view class="cons">
|
|
|
- <view class="tit omit">{{ item.title }}</view>
|
|
|
- <view class="str-summery">{{ item.briefContent }}</view>
|
|
|
- <view class="lx">浏览</view>
|
|
|
+ <view class="title omit">{{ item.title }}</view>
|
|
|
+ <view class="desc omit">{{ item.briefContent }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <u-back-top :scroll-top="scrollTop"></u-back-top>
|
|
|
+ <help ref="help"></help>
|
|
|
</view>
|
|
|
- <u-back-top :scroll-top="scrollTop"></u-back-top>
|
|
|
- <help ref="help"></help>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import help from '../../components/help.vue';
|
|
|
+import help from "../../components/help.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
help
|
|
@@ -96,11 +101,12 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
ip: this.$http.urls.ip,
|
|
|
+ top: 20,
|
|
|
scrollTop: 0,
|
|
|
hot_list: [],
|
|
|
zn_list: [],
|
|
|
aboutUs: {},
|
|
|
- weather: { tem: '0', wea: '晴', win: '北风', win_speed: '0级', win_meter: '0km/h' }
|
|
|
+ weather: { tem: "0", wea: "晴", win: "北风", win_speed: "0级", win_meter: "0km/h" }
|
|
|
};
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
@@ -110,6 +116,24 @@ export default {
|
|
|
this.getData();
|
|
|
this.getWeather();
|
|
|
//uni.setStorageSync("user",{"searchValue":null,"createBy":null,"createTime":null,"updateBy":null,"updateTime":null,"remark":null,"params":{},"memberId":27,"name":"wx_1011223213","mobile":"","email":null,"registerTime":"2021-11-23 21:39:27","lastLoginTime":"2021-11-23 21:53:20","lastLoginIp":"127.0.0.1","loginNum":2,"unionid":null,"openid":"ok3qt5FMehpGy6aOtqPd9pnPLC_Q","nickName":"西域男孩","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLeSLQBtiavUU0ByFbXtND7iaricbNU81HSdaV9bQLTfciaMV604u5TNIdjLiaarL7MIZQXIrWFZfNiaZIQ/132","gender":"0","province":"","city":"","country":"","language":"zh_CN","lastLat":null,"lastLng":null,"isShop":0,"apiToken":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIyNyIsImlhdCI6MTYzNzY3NTYwMCwiZXhwIjoxNjM4MjgwNDAwfQ.vRPuNnLrUH1T8_qOL6Ti4TT2Akw29Set18kiavbjJynol52cxHXqeRoStyF4afdcsiipELdVW9G8-zh52voOFg"})
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ console.log("assd:" + JSON.stringify(res.safeArea));
|
|
|
+ this.top = parseInt(res.safeArea.top) + 5;
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.error(err);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ uni.setNavigationBarColor({
|
|
|
+ frontColor: "#000000",
|
|
|
+ backgroundColor: "#f8f8f8",
|
|
|
+ fail(e) {
|
|
|
+ console.log("aaa:" + JSON.stringify(e));
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
getWeather() {
|
|
@@ -130,7 +154,7 @@ export default {
|
|
|
this.hot_list = res.data.data.hot_list;
|
|
|
this.zn_list = res.data.data.zn_list;
|
|
|
this.aboutUs = res.data.data.aboutUs;
|
|
|
- uni.setStorageSync('aboutUs', this.aboutUs);
|
|
|
+ uni.setStorageSync("aboutUs", this.aboutUs);
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -142,23 +166,23 @@ export default {
|
|
|
//详情
|
|
|
detail(item) {
|
|
|
if (item.contentId) {
|
|
|
- uni.navigateTo({ url: '/pages/travel/detail?id=' + item.contentId });
|
|
|
+ uni.navigateTo({ url: "/pages/travel/detail?id=" + item.contentId });
|
|
|
} else {
|
|
|
//根据后台的选择跳转id跳转到指定文章
|
|
|
let id;
|
|
|
if (item == 1) {
|
|
|
- id = this.$http.getParam(this.aboutUs.briefText1, '?');
|
|
|
+ id = this.$http.getParam(this.aboutUs.briefText1, "?");
|
|
|
}
|
|
|
if (item == 2) {
|
|
|
- id = this.$http.getParam(this.aboutUs.briefText2, '?');
|
|
|
+ id = this.$http.getParam(this.aboutUs.briefText2, "?");
|
|
|
}
|
|
|
if (item == 3) {
|
|
|
- id = this.$http.getParam(this.aboutUs.briefText3, '?');
|
|
|
+ id = this.$http.getParam(this.aboutUs.briefText3, "?");
|
|
|
}
|
|
|
if (item == 4) {
|
|
|
- id = this.$http.getParam(this.aboutUs.briefText4, '?');
|
|
|
+ id = this.$http.getParam(this.aboutUs.briefText4, "?");
|
|
|
}
|
|
|
- uni.navigateTo({ url: '/pages/travel/detail?id=' + id });
|
|
|
+ uni.navigateTo({ url: "/pages/travel/detail?id=" + id });
|
|
|
}
|
|
|
},
|
|
|
navigate(url) {
|
|
@@ -180,54 +204,155 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+page {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+}
|
|
|
+.welcome {
|
|
|
+ margin-top: 38px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+ .icon {
|
|
|
+ float: left;
|
|
|
+ font-size: 27px;
|
|
|
+ }
|
|
|
+ .dw {
|
|
|
+ float: left;
|
|
|
+ width: 6.5%;
|
|
|
+ margin: 3px 7px 0px 7px;
|
|
|
+ }
|
|
|
+ .bq {
|
|
|
+ width: 45%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+}
|
|
|
.page {
|
|
|
padding: 10px;
|
|
|
overflow-x: hidden;
|
|
|
+ margin-top: -50px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
-.wd {
|
|
|
- margin-top: 28px;
|
|
|
- z-index: 111111;
|
|
|
- .qw {
|
|
|
- font-size: 25px;
|
|
|
- float: left;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .xs {
|
|
|
- margin-left: 45px;
|
|
|
+.top {
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .wd {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
width: 100%;
|
|
|
- font-size: 13px;
|
|
|
- line-height: 20px;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-left: 10px;
|
|
|
+ z-index: 111111;
|
|
|
+ color: #666666;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.1) 100%);
|
|
|
+ .qw {
|
|
|
+ font-size: 25px;
|
|
|
+ float: left;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .xs {
|
|
|
+ margin-left: 45px;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.ms {
|
|
|
- font-size: 20px;
|
|
|
- font-weight: bold;
|
|
|
- margin-bottom: 15px;
|
|
|
- margin-top: 10px;
|
|
|
- .jb {
|
|
|
- float: right;
|
|
|
- font-size: 13px;
|
|
|
+ .sos {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.3) 100%);
|
|
|
+ padding: 10px 10px 15px 10px;
|
|
|
+ color: white;
|
|
|
+ font-size: 15px;
|
|
|
+ text-align: center;
|
|
|
font-weight: normal;
|
|
|
- margin-top: 6px;
|
|
|
+ border-radius: 30px;
|
|
|
+ z-index: 111112;
|
|
|
+ image {
|
|
|
+ width: 115%;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-.top {
|
|
|
image {
|
|
|
width: 100%;
|
|
|
- height: 150px;
|
|
|
- border-radius: 5px;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ height: 200px;
|
|
|
}
|
|
|
}
|
|
|
-.a1 {
|
|
|
- border-radius: 3px;
|
|
|
-}
|
|
|
-.it {
|
|
|
+.item {
|
|
|
margin-top: 15px;
|
|
|
-}
|
|
|
-.v_title {
|
|
|
- .hd {
|
|
|
- left: 25px;
|
|
|
+ .lable {
|
|
|
+ margin-bottom: 13px;
|
|
|
+ .title {
|
|
|
+ float: left;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ float: left;
|
|
|
+ width: 25%;
|
|
|
+ margin-top: -3px;
|
|
|
+ }
|
|
|
+ .look {
|
|
|
+ color: #999999;
|
|
|
+ float: right;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rows {
|
|
|
+ margin-left: -5px;
|
|
|
+ margin-right: -5px;
|
|
|
+ .row {
|
|
|
+ float: left;
|
|
|
+ width: 33.333%;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 150px;
|
|
|
+ .out {
|
|
|
+ padding: 0px 3px 0px 3px;
|
|
|
+ .int {
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ border-radius: 10px;
|
|
|
+ height: 150px;
|
|
|
+ width: 100%;
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 13px;
|
|
|
+ left: 10px;
|
|
|
+ width: 85%;
|
|
|
+ color: white;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ background-color: white;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ .cons {
|
|
|
+ padding: 12px;
|
|
|
+ .title {
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|