Skip to content

V
vue-ssr-mobile
Commit 1cbd37e1 authored by lixy's avatar lixy
Browse files
Options

活动详情，旅游、营地、新闻、活动列表

parent 65a94c36
Expand all Show whitespace changes
Inline Side-by-side
Showing with 259 additions and 138 deletions
assets/styles/base.scss
View file @ 1cbd37e1
...@@ -139,7 +139,7 @@ input[disabled] { ...@@ -139,7 +139,7 @@ input[disabled] {
border-bottom: 1px solid #DFDFDF; border-bottom: 1px solid #DFDFDF;
} }
.mint-second-menu li:last-child{ .mint-second-menu li:last-child{
border-bottom: none; border-bottom: none !important;
} }
.mint-second-menu li.active { .mint-second-menu li.active {
color:#34C1A8; color:#34C1A8;
......
components/goTop.vue
View file @ 1cbd37e1
...@@ -73,6 +73,6 @@ ...@@ -73,6 +73,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 9; z-index: 99;
} }
</style> </style>
components/head.vue
View file @ 1cbd37e1
This diff is collapsed.
components/secondBanner.vue
View file @ 1cbd37e1
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<img <img
:src= "item.cover" :src= "item.cover"
:alt="item.title" :alt="item.title"
style="height: 80px;width:auto;"> style="height: 80px;width:auto;margin: 0 auto;">
</li> </li>
</ul> </ul>
</div> </div>
......
pages/activity.vue
View file @ 1cbd37e1
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
margin: 10px 0; margin: 10px 0;
} }
#scroll-area li{ #scroll-area li{
box-shadow: 2px 3px 13px #999; box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
margin: 17px 0; margin: 17px 0;
border-radius: 3px; border-radius: 3px;
} }
......
pages/activityDetail/index.vue
View file @ 1cbd37e1
<template> <template>
<div class="shop-page"> <div
<Header :seller="seller" /> class="activity-detail-page"
<mt-navbar v-model="selected"> style="margin-top:1.87733rem;">
<mt-tab-item id="goods">点餐</mt-tab-item> <Head/>
<mt-tab-item id="ratings">评价</mt-tab-item> <img
<mt-tab-item id="seller">商家</mt-tab-item> :src="detail.banner"
</mt-navbar> style="width: 100%;height:249px;object-fit: cover;">
<mt-tab-container v-model="selected"> <div class="detail-main-container">
<mt-tab-container-item id="goods"> <div>
<Goods :seller="seller" /> <h1 class="activity-detail-name">{{ detail.title }}</h1>
</mt-tab-container-item> <div class="activity-detail-info">
<mt-tab-container-item id="ratings"> <div
<Ratings :seller="seller" /> class="flex-aic">
</mt-tab-container-item> <span style="color: #666;font-size: 14px;">活动人数</span>
<mt-tab-container-item id="seller"> <div>{{ detail.limitNum }}</div>
<Seller :seller="seller" /> </div>
</mt-tab-container-item> <div
</mt-tab-container> class="flex-aic"
style="margin: 13px 0;">
<span style="color: #666;font-size: 14px;">活动时间</span>
<div>{{ detail.startTime | formatDate('yyyy-MM-dd hh:mm') }}~{{ detail.endTime | formatDate('yyyy-MM-dd hh:mm') }} </div>
</div>
<div class="flex-aic">
<span style="color: #666;font-size: 14px;">活动地点</span>
<div>{{ detail.province }}{{ detail.city }}{{ detail.town }}{{ detail.address }}</div>
</div>
</div>
</div>
<div>
<div style="height: 10px;background: #eee;"/>
</div>
<div class="flex-jcb activity-detail">
<div style="background: #fff;margin: 20px 0;">
<h3
class="content-t"
style="text-align: left;">活动详情</h3>
<div
class="models-details"
v-html="detail.content"/>
</div>
</div>
</div>
<go-top/>
</div> </div>
</template> </template>
<script> <script>
import Header from "./components/header"; import axios from '../../plugins/axios'
import Goods from "./components/goods"; import Head from "~/components/head";
import Ratings from "./components/ratings"; import DetailBanner from '~/components/detailBanner'
import Seller from "./components/seller"; import GoTop from "~/components/goTop";
import * as shoppingApi from "~/assets/services/shopping";
export default { export default {
components: { components: {
Header, Head,
Goods, DetailBanner,
Ratings, GoTop
Seller
}, },
data() { data() {
return { return {};
selected: "goods",
seller: {}
};
}, },
async asyncData() { async asyncData({ route}) {
const { const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/'+route.query.id);
data let detail = data.data;
} = await shoppingApi.seller(); detail.content =detail.content.replace(/<img/g,"<img style='width:90%'");
return { return {detail: detail}
seller: data
};
},
created() {
// vue resource
// this.$http.get('api/seller').then((res) => {
// res = res.body;
// if(res.errno === ERR_OK){
// this.seller = res.data;
// console.log(this.seller);
// }
// })
}, },
created() {},
methods: {},
}; };
</script> </script>
...@@ -65,8 +75,101 @@ ...@@ -65,8 +75,101 @@
<style lang="scss"> <style lang="scss">
@import "../../assets/styles/mixin"; @import "../../assets/styles/mixin";
.shop-page { .activity-detail-page {
font-size: px2rem(24px); font-size: px2rem(24px);
.content-t{
font-size: 15px;
font-weight: bold;
margin-bottom: 13px;
}
}
.detail-main-container{
border-radius: 7px 7px 0 0;
box-shadow: 0px 0px 13px #666;
margin-top: -10px;
z-index: 99;
position: relative;
background: #fff;
.activity-detail-name{
padding: 15px px2rem(20px);
font-size: px2rem(34px);
font-weight: bold;
border-bottom: 1px solid #dfdfdf;
}
.activity-detail{
padding: 0 px2rem(20px);
}
.activity-detail-info{
padding: 13px px2rem(20px);
font-size: 14px;
span{
color: #666;
min-width: 60px;
margin-right: 13px;
}
}
.vehicle-lower{
padding: 0 px2rem(20px);
font-size: px2rem(30px);
margin-top: px2rem(20px);
margin-bottom: px2rem(20px);
span{
color: #F25B5B;
font-size: px2rem(36px);
font-weight: bold;
margin-left: px2rem(30px);
margin-right: px2rem(4px);
}
}
.member-list{
padding: 0 px2rem(20px);
}
.member-list-c img{
width: 20px;
height: 20px;
margin-right: px2rem(20px);
}
.member-list-name{
color: #666;
font-size:px2rem(26px);
margin-bottom: px2rem(20px);
}
.market-price{
font-size: px2rem(30px);
margin: px2rem(34px) 0;
padding: 0 px2rem(20px);
}
.detail-list{
height: px2rem(100px);
}
.select-tab{
width: 100%;
.select-tab-li-l{
font-size:16px;
color: #999;
padding: 0 px2rem(20px);
}
.select-tab-li-l.active{
color: #333;
font-weight: bold;
height: px2rem(100px);
line-height: px2rem(100px);
border-bottom: 2px solid #1bbb9f;
}
}
.scroll0, .scroll1, .scroll2, .scroll3{
padding: 0 px2rem(20px);
.base-set{
margin: 17px 0;
font-size: 15px;
font-weight: bold;
}
.base-set-name{
font-size: 13px;
color: #666;
padding: 0 10px 6px 0;
}
}
.mint-navbar { .mint-navbar {
position: sticky; position: sticky;
...@@ -98,6 +201,27 @@ ...@@ -98,6 +201,27 @@
} }
} }
} }
.left-item{
width: 30%;
border-left: 1px solid #c1c1c1;
border-right: 1px solid #c1c1c1;
height: 34px;
padding-left: 10px;
line-height: 34px;
}
.right-item{
width:70%;
border-right: 1px solid #ccc;
height: 34px;
line-height: 34px;
padding-left: 10px;
}
.modal-item{
border-top:1px solid #ccc;
}
.kr-article-article .modal-item:last-child{
border-bottom: 1px solid #ccc;
}
} }
</style> </style>
pages/campsite.vue
View file @ 1cbd37e1
<template> <template>
<div class="order-page"> <div class="campsite-container">
<Head/> <Head/>
<second-banner <second-banner
:list = "bannerList" :list = "bannerList"
...@@ -19,19 +19,21 @@ ...@@ -19,19 +19,21 @@
id="scroll-area" id="scroll-area"
type="1" type="1"
style="padding-top: 0;" style="padding-top: 0;"
class="main-padding"> class="main-padding campsite-ul">
<router-link <li
v-for="item in dataDetail" v-for="item in dataDetail"
:to="{ path: 'campsiteDetail', query:{id: item.id }}"
:key="item.id" :key="item.id"
class="flex-jcb news-item"> class="campsite-li">
<router-link
:to="{ path: 'campsiteDetail', query:{id: item.id }}"
class="campsite-item">
<img <img
:src="item.logo" :src="item.logo"
class="tour-img-home"> class="campsite-logo">
<div class="tour-home-r"> <div class="ellipsis2 campsite-name">{{ item.name }}</div>
<div class="ellipsis2">{{ item.name }}</div>
</div>
</router-link> </router-link>
</li>
</ul> </ul>
<p <p
v-if="preventRepeatReuqest" v-if="preventRepeatReuqest"
...@@ -171,42 +173,40 @@ ...@@ -171,42 +173,40 @@
<style lang="scss"> <style lang="scss">
@import "../assets/styles/mixin"; @import "../assets/styles/mixin";
.news-item{ .campsite-container{
.campsite-ul{
padding-top: 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.campsite-li{
box-shadow: 2px 3px 13px rgba(153,153,153,0.2);
width: 48%;
margin: 10px 0; margin: 10px 0;
border-radius: 3px;
} }
.tour-home-r, .news-home-r{ .campsite-logo{
width: 58%; width: 100%;
height: 110px;
object-fit: cover;
border-radius: 3px 3px 0 0;
} }
.tour-img-home, .news-home-img{ .campsite-name{
width: px2rem(300px); font-size: 14px;
height: px2rem(150px); font-weight: bold;
margin: 13px;
} }
.order-page {
.no-data {
text-align: center;
.nodata {
width: px2rem(400px);
height: px2rem(400px);
margin: 15vh auto px2rem(10px) auto;
} }
p {
color: #6a6a6a;
font-size: px2rem(32px);
margin-bottom: px2rem(15px);
} }
.news-item{
.login { margin: 10px 0;
width: px2rem(240px);
height: px2rem(80px);
background: #56d176;
border: none;
color: #fff;
font-size: px2rem(28px);
border-radius: 2px;
} }
.tour-home-r, .news-home-r{
width: 58%;
} }
.tour-img-home, .news-home-img{
width: px2rem(300px);
height: px2rem(150px);
} }
</style> </style>
pages/news.vue
View file @ 1cbd37e1
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
<img <img
:src="item.coverImage" :src="item.coverImage"
style="width: 17px;height: 17px;margin-right: 7px;"> style="width: 17px;height: 17px;margin-right: 7px;">
{{ item.addTime.substring(0, 10) }}</div> {{ item.addTime.substring(0, 10) }}</div>
</div> </div>
</router-link> </router-link>
...@@ -169,6 +168,7 @@ ...@@ -169,6 +168,7 @@
.news-img-list{ .news-img-list{
width: 92px; width: 92px;
height: 75px; height: 75px;
border-radius: 3px;
} }
.news-list { .news-list {
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
...@@ -198,31 +198,4 @@ ...@@ -198,31 +198,4 @@
width: px2rem(300px); width: px2rem(300px);
height: px2rem(150px); height: px2rem(150px);
} }
.order-page {
.no-data {
text-align: center;
.nodata {
width: px2rem(400px);
height: px2rem(400px);
margin: 15vh auto px2rem(10px) auto;
}
p {
color: #6a6a6a;
font-size: px2rem(32px);
margin-bottom: px2rem(15px);
}
.login {
width: px2rem(240px);
height: px2rem(80px);
background: #56d176;
border: none;
color: #fff;
font-size: px2rem(28px);
border-radius: 2px;
}
}
}
</style> </style>
pages/tour.vue
View file @ 1cbd37e1
<template> <template>
<div class="order-page"> <div class="tour-container">
<Head/> <Head/>
<second-banner <second-banner
:list = "bannerList" :list = "bannerList"
...@@ -24,12 +24,12 @@ ...@@ -24,12 +24,12 @@
v-for="item in dataDetail" v-for="item in dataDetail"
:to="{ path: 'tourDetail', query:{id: item.id }}" :to="{ path: 'tourDetail', query:{id: item.id }}"
:key="item.id" :key="item.id"
class="flex-jcb news-item"> class="flex-jcb tour-item">
<img <img
:src="item.cover" :src="item.cover"
class="tour-img-home"> class="tour-item-img">
<div class="tour-home-r"> <div class="tour-list">
<div class="ellipsis2">{{ item.name }}</div> <div class="ellipsis2 tour-item-name">{{ item.name }}</div>
</div> </div>
</router-link> </router-link>
</ul> </ul>
...@@ -172,6 +172,26 @@ ...@@ -172,6 +172,26 @@
<style lang="scss"> <style lang="scss">
@import "../assets/styles/mixin"; @import "../assets/styles/mixin";
.tour-container{
.tour-item{
margin: 17px 0;
}
.tour-item-name{
font-size: 15px;
font-weight: bold;
}
.tour-item-img{
width: 92px;
height: 75px;
object-fit: cover;
border-radius: 3px;
}
.tour-list{
border-bottom: 1px solid #dfdfdf;
margin-left: px2rem(20px);
width: 100%;
}
}
.news-item{ .news-item{
margin: 10px 0; margin: 10px 0;
} }
......
pages/vehicle.vue
View file @ 1cbd37e1
...@@ -196,6 +196,7 @@ ...@@ -196,6 +196,7 @@
.vehicle-img-list{ .vehicle-img-list{
width: px2rem(277px); width: px2rem(277px);
height: px2rem(225px); height: px2rem(225px);
border-radius: 3px;
} }
.vehicle-list{ .vehicle-list{
border-bottom: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
......
pages/vehicleDetail/index.vue
View file @ 1cbd37e1
...@@ -337,6 +337,10 @@ ...@@ -337,6 +337,10 @@
.detail-main-container{ .detail-main-container{
border-radius: 7px 7px 0 0; border-radius: 7px 7px 0 0;
box-shadow: 0px 0px 13px #666; box-shadow: 0px 0px 13px #666;
margin-top: -10px;
z-index: 99;
position: relative;
background: #fff;
.vehicle-detail-name{ .vehicle-detail-name{
padding: 14px px2rem(20px) 0 px2rem(20px); padding: 14px px2rem(20px) 0 px2rem(20px);
font-size: px2rem(34px); font-size: px2rem(34px);
...@@ -374,8 +378,8 @@ ...@@ -374,8 +378,8 @@
} }
.member-list-name{ .member-list-name{
color: #666; color: #666;
font-size:px2rem(24px); font-size:px2rem(26px);
margin-bottom: px2rem(24px); margin-bottom: px2rem(20px);
} }
.market-price{ .market-price{
font-size: px2rem(30px); font-size: px2rem(30px);
...@@ -408,9 +412,9 @@ ...@@ -408,9 +412,9 @@
font-weight: bold; font-weight: bold;
} }
.base-set-name{ .base-set-name{
font-size: 12px; font-size: 13px;
color: #666; color: #666;
padding: 0 10px 18px 0; padding: 0 10px 6px 0;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment