优化样式

src/boot/product.js

@@ -12,13 +12,13 @@ const product = {
                 // 接送机，包车
                 url = "/detailCar/" + configId
             } else if (t === 3) {
-                url = "/detailHotal/" + configId
+                url = "/detailHotal/" + configId + '/' + productInfo.b2CPrice
             } else if (t === 2) {
                 url = "/detailsScenicSpotTicket/" + configId
             } else if (t === 1) {
                 url = "/detail/" + encodeURIComponent(productInfo.id ? productInfo.id : productInfo.ID) + "/" + 0 + "/" + configId
             } else if (t === 5) {
-                url = "/detailHotal/" + configId+'/'+productInfo.b2CPrice
+                url = "/detailHotal/" + configId + '/' + productInfo.b2CPrice
             }
         } else {
             throw new Error("參數不合法");

src/boot/utils.js

@@ -26,7 +26,7 @@ Vue.prototype.domainManager = function() {
             domainUrl = "http://testapi.oytour.com";
         } else if (domainNameUrl.indexOf('oytour') !== -1) {
             domainUrl = "http://reborn.oytour.com";
-            domainUrl = 'http://192.168.10.206:8015' //'http://192.168.10.206:8015' ''http://192.168.10.11:8083' '
+            //domainUrl = 'http://192.168.10.206:8015' //'http://192.168.10.206:8015' ''http://192.168.10.11:8083' '
         }
         var obj = {
             //主地址
@@ -41,7 +41,7 @@ Vue.prototype.domainManager = function() {
     //获取当前域名
 Vue.prototype.GetDomain = function() {
     var domainNameUrl = window.location.hostname;
-    domainNameUrl = "t.oytour.com";
+    domainNameUrl = "www.oytour.com";
     return domainNameUrl;
 }
 Vue.prototype.groupBy = function(array, f) {

src/components/label_other/photo.vue

 <template>
   <section class="photo1 section-block">
-    <div class="photo" v-if="plugData.ImageUrl">
-      <img :src="plugData.ImageUrl" :alt="plugData.Title" />
+    <div class="photo mobile-only rounded-borders" v-if="plugData.ImageUrl" style="overflow:hidden;margin-bottom: 0px;">
+      <img :src="plugData.ImageUrl" :alt="plugData.Title" style="height:20vh;width:auto;" />
+    </div>
+    <div class="photo desktop-only" v-if="plugData.ImageUrl">
+      <img :src="plugData.ImageUrl" :alt="plugData.Title"/>
     </div>
   </section>
 </template>

src/components/label_picture/diy-img-five.vue

@@ -39,7 +39,7 @@
             :key="index"
             class="relative-position"
             style=" min-width: 200px;"
-            :class="{ 'col': current != index && $q.platform.is.desktop, 'col-4': current == index&& $q.platform.is.desktop }"
+            :class="{ 'col': ((current != index && $q.platform.is.desktop) || realCount!=5), 'col-4': current == index && $q.platform.is.desktop && realCount==5 }"
             @mouseenter="hoverHandler(index)"
           >
             <q-img
@@ -55,10 +55,10 @@
                   {{
                   item.TripTitle.split('|')[0]}}
                 </a>
-                <div class="q-mt-sm row items-center no-wrap overflow-hidden" v-if="current==index && plugData.Title.indexOf('|tag')!=-1">
-                  <q-chip outline color="grey-2" class="f12 cursor-pointer" text-color="grey-2" >觀光行程</q-chip>
-                  <q-chip outline color="grey-2" class="f12 cursor-pointer"  text-color="grey-2" >熱門票券</q-chip>
-                  <q-chip style="background:rgba(255,255,255,.3)" class="f12 cursor-pointer"  text-color="grey-2" >更多在地體驗</q-chip>
+                <div class="q-mt-sm row items-center no-wrap overflow-hidden" v-if="current==index && plugData.Title.indexOf('|tag')!=-1 && realCount==5">
+                  <q-chip outline color="grey-2" class="f12 cursor-pointer" text-color="grey-2" clickable @click="goProductListHandler(0,item.TripTitle.split('|')[1])">觀光行程</q-chip>
+                  <q-chip outline color="grey-2" class="f12 cursor-pointer"  text-color="grey-2" clickable @click="goProductListHandler(1,item.TripTitle.split('|')[1])">熱門票券</q-chip>
+                  <q-chip style="background:rgba(255,255,255,.3)" clickable class="f12 cursor-pointer"  text-color="grey-2" @click="CommonJump(`/city/${item.TripTitle.split('|')[1]}`,{},'blank')">更多在地體驗</q-chip>
                 </div>
               </div>
             </div>
@@ -70,14 +70,20 @@
 </template>
 
 <script>
+import {date} from 'quasar'
 //圖片 - 6x1
 export default {
   props: ["plugData"],
   data() {
     return {
       current: 0,
+      realCount: 0
     };
   },
+  created() {
+    //console.log(this.plugData.Details,this.plugData.Details.filter(x=> x.ImageUrl!=''))
+    this.realCount = this.plugData.Details.filter(x=> x.ImageUrl!='').length
+  },
   methods: {
     hoverHandler(i) {
       this.current = i;
@@ -89,6 +95,15 @@ export default {
         arr=strs[1].split(',')
       }
       return arr
+    },
+    goProductListHandler(t,id){
+      let CategoryName=t==0?'观光行程':'景点门票'
+      this.CommonJump('/search',{
+        areaId:id,
+        qsearchDate:date.formatDate(new Date(),'YYYY-MM-DD'),
+        qsearchEndDate:date.formatDate(date.addToDate(new Date(),{month:2}),'YYYY-MM-DD'),
+        CategoryName
+      })
     }
   },
 };

src/components/label_picture/diy-img-four.vue

@@ -2,24 +2,31 @@
   <!--圖片 - 4x4-->
   <div class="q-mt-md">
     <section class="pr1 section-block">
+      <div class="mobile-only">
+        <h2 class="block-title">{{plugData.Title}}</h2>
+        <p class="title-teaser">{{plugData.SubTitle}}</p>
+      </div>
       <div class="pr-banner-block">
         <ul class="pr-banner-list">
-          <li v-for="(item,index) in plugData.Details" :key="index">
-            <a @click="OpenNewUrl(item.LinkUrl)"  :title="item.TripTitle"
+          <li v-for="(item,index) in plugData.Details" :key="index" class="relative-position">
+            <a @click="OpenNewUrl(item.LinkUrl+'/0')" class="rounded-borders" :title="item.TripTitle"
               :style="{backgroundImage:`url('${(item.TripImageUrl&&item.TripImageUrl!=''?item.TripImageUrl:item.ImageUrl)}')`}"></a>
+              <div class="absolute absolute-bottom-left absolute-bottom-right rounded-borders q-pa-md text-shadow text-subtitle2 text-white" style=" background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))">
+                {{ item.TripTitle }}
+              </div>
           </li>
         </ul>
       </div>
-      <div class="pr-text-block">
+      <div class="pr-text-block light-shadow rounded-borders desktop-only">
         <h2 class="block-title">{{plugData.Title}}</h2>
         <p class="title-teaser">{{plugData.SubTitle}}</p>
         <ul class="pr-text-list">
           <li v-for="(item,index) in plugData.Details" :key="index">
-            <a @click="OpenNewUrl(item.LinkUrl)">
-              <h3 class="pd-title">{{item.TripTitle}}</h3>
-              <div class="price">
-                <small class="unit">NT$</small>{{item.Price}}
-                <small class="unit">元起</small>
+            <a @click="OpenNewUrl(item.LinkUrl+'/0')">
+              <h3 class="text-subtitle2">{{item.TripTitle}}</h3>
+              <div class="price  text-dark">
+                <small class="text-subtitle2 q-mr-sm">CNY</small>
+                <span class="text-subtitle2 text-weight-bolder text-dark">{{ moneyFormat(item.Price,2) }}</span>
               </div>
             </a>
           </li>
@@ -162,7 +169,6 @@
     color: #00afff;
     font-size: 20px;
     font-weight: 700;
-    font-family: "oswald";
   }
 
   .pr1 .pr-text-block .pr-text-list .price .unit {

src/components/label_picture/diy-img-one.vue

@@ -2,66 +2,150 @@
   <!--圖片 - 3x1-->
   <div>
     <section class="tour2 section-block">
-      <h2 class="block-title">{{plugData.Title}}</h2>
-      <p class="title-teaser">{{plugData.SubTitle}}
-      </p>
-      <ul class="pd-list">
-        <li class="pd-box" v-for="(item,index) in plugData.Details" :key="index" v-if="item.TripImageUrl||item.ImageUrl">
-          <a @click="OpenNewUrl(item.LinkUrl)" :title="item.TripTitle" class="pd-link">
-            <div class="pd-img"
-              :style="{backgroundImage:`url('${(item.TripImageUrl&&item.TripImageUrl!=''?item.TripImageUrl:item.ImageUrl)}')`}">
+      <h2 class="block-title">{{ plugData.Title.split('|')[0] }}</h2>
+      <p class="title-teaser">{{ plugData.SubTitle }}</p>
+      <ul class="pd-list" v-if="showType == 1">
+        <li
+          class="pd-box"
+          v-for="(item, index) in plugData.Details"
+          :key="index"
+          v-if="item.TripImageUrl || item.ImageUrl"
+        >
+          <a
+            @click="OpenNewUrl(item.LinkUrl)"
+            :title="item.TripTitle"
+            class="pd-link"
+          >
+            <div
+              class="pd-img"
+              :style="{
+                backgroundImage: `url('${
+                  item.TripImageUrl && item.TripImageUrl != ''
+                    ? item.TripImageUrl
+                    : item.ImageUrl
+                }')`,
+              }"
+            >
               <div class="pd-price">
                 <div class="price">
-                  {{item.DayNum}}
-                  <small class="unit">天</small> {{item.Price}}
+                  {{ item.DayNum }}
+                  <small class="unit">天</small> {{ item.Price }}
                   <small class="unit">元起</small>
                 </div>
               </div>
             </div>
             <div class="pd-content">
               <h3 class="pd-title">
-                {{item.TripTitle}}
+                {{ item.TripTitle }}
               </h3>
             </div>
           </a>
         </li>
       </ul>
+      <div
+        class="q-col-gutter-md q-mt-md"
+        :class="{ row: $q.platform.is.desktop, '': $q.platform.is.mobile }"
+        v-else-if="showType == 2"
+      >
+        <template v-for="(item, index) in plugData.Details">
+          <div
+            class="relative-position"
+            :key="index"
+            :class="{ 'col-4 column': $q.platform.is.desktop }"
+            v-if="item.ImageUrl"
+          >
+            <div
+              class="absolute-top-left q-pa-sm"
+              style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));top: 16px;left: 16px;right: 0;border-radius: 12px;z-index: 1;"
+            >
+              <div
+                class="text-grey-1"
+                style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)"
+              >
+                <q-icon name="iconfont iconhongqi" size="16px" />
+                <span class="q-ml-sm">{{ item.DayNum }}天行程</span>
+              </div>
+            </div>
+            <q-img
+              :src="item.ImageUrl"
+              :ratio="16 / 9"
+              spinner-color="primary"
+              spinner-size="20px"
+              style="border-radius: 12px"
+            />
+            <div class="col">
+              <div
+                class="q-mt-md text-subtitle1 text-dark ellipsis-2-lines cursor-pointer"
+                @click="OpenNewUrl(item.LinkUrl+'/0')"
+              >
+                <!-- -->
+                {{ item.TripTitle }}
+              </div>
+              <div class="row items-center q-col-gutter-sm q-mt-sm">
+                <q-chip
+                  style="background: rgba(193, 0, 21, 0.1)"
+                  size="sm"
+                  class="f12 rounded-borders text-negative"
+                  label="急速確認"
+                />
+              </div>
+            </div>
+            <div class="q-mt-sm">
+              <div class="text-subtitle2 text-weight-bolder text-dark">
+                <span>CNY {{ item.Price }}</span>
+                <span class="text-grey-8 f12 q-ml-sm">起</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
     </section>
   </div>
 </template>
 
 <script>
-  export default {
-    props: ["plugData"]
+export default {
+  props: ["plugData"],
+  data() {
+    return {
+      showType: 1,
     };
-
+  },
+  mounted() {
+    if (this.plugData) {
+      let t = this.plugData.Title.split("|");
+      this.showType = t.length > 1 ? parseInt(t[1]) : 1;
+    }
+  },
+};
 </script>
 
 <style>
-  .tour2 {}
+.tour2 {
+}
 
-  .tour2 .block-title {
+.tour2 .block-title {
   font-size: 22px;
   font-weight: 600;
   padding: 0;
   margin: 0;
   line-height: unset;
-  }
+}
 
-  .tour2 .title-teaser {
+.tour2 .title-teaser {
   margin-bottom: 10px;
   font-size: 16px;
   color: #999;
-  }
+}
 
-  .tour2 .pd-list {
+.tour2 .pd-list {
   display: flex;
   flex-flow: row wrap;
   padding: 0;
   margin: 0;
-  }
+}
 
-  .tour2 .pd-list .pd-box {
+.tour2 .pd-list .pd-box {
   padding: 0;
   margin: 0;
   margin-right: 20px;
@@ -79,19 +163,19 @@
   list-style: none;
   border-radius: 4px;
   overflow: hidden;
-  }
+}
 
-  .tour2 .pd-list .pd-box:last-child {
+.tour2 .pd-list .pd-box:last-child {
   margin-right: 0px;
-  }
+}
 
-  a {
+a {
   cursor: pointer;
   text-decoration: none;
   color: var(--q-color-primary);
-  }
+}
 
-  .tour2 .pd-box .pd-img {
+.tour2 .pd-box .pd-img {
   position: relative;
   width: 100%;
   padding-bottom: 66.237%;
@@ -100,9 +184,9 @@
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
-  }
+}
 
-  .tour2 .pd-box .pd-img .pd-price {
+.tour2 .pd-box .pd-img .pd-price {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -110,9 +194,9 @@
   width: 100%;
   border-bottom: 4px solid var(--q-color-primary);
   text-align: right;
-  }
+}
 
-  .tour2 .pd-box .pd-img .pd-price .price {
+.tour2 .pd-box .pd-img .pd-price .price {
   display: inline-block;
   padding: 4px 12px 0;
   color: #fff;
@@ -125,25 +209,25 @@
   -moz-background-clip: padding;
   border-radius: 5px 0 0;
   background-clip: padding-box;
-  }
+}
 
-  .tour2 .pd-box .pd-img .pd-price .price small {
+.tour2 .pd-box .pd-img .pd-price .price small {
   padding: 0 4px;
   font-size: 14px;
-  }
+}
 
-  .tour2 .pd-box .pd-content {
+.tour2 .pd-box .pd-content {
   padding: 15px 15px 20px;
-  }
+}
 
-  .tour2 .pd-box .pd-title {
+.tour2 .pd-box .pd-title {
   font-size: 15px;
   line-height: 1.5;
   font-weight: 400;
   color: #333;
-  }
+}
 
-  @media only screen and (max-width: 1200px) {
+@media only screen and (max-width: 1200px) {
   .tour2 .pd-list .pd-box {
     flex-basis: calc(50% - 10px) !important;
   }
@@ -151,20 +235,19 @@
   .tour2 .pd-list .pd-box:nth-child(even) {
     margin-right: 0 !important;
   }
-  }
+}
 
-  @media only screen and (min-width: 768px) {
+@media only screen and (min-width: 768px) {
   .pd-box:hover {
     transform: translate(0, -4px) !important;
     box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
   }
-  }
+}
 
-  @media only screen and (max-width: 425px) {
+@media only screen and (max-width: 425px) {
   .tour2 .pd-list .pd-box {
     flex-basis: 100% !important;
     margin-right: 0 !important;
   }
-  }
-
+}
 </style>

src/components/label_picture/diy-img-two.vue

@@ -2,7 +2,7 @@
   <!--圖片 - 4x1-->
   <div :class="{'q-mt-md':plugData.Title.split('|')[0]=='','q-mt-xl':plugData.Title.split('|')[0]!=''}">
     <section class="tour1 section-block" v-if="plugData">
-      <h2 class="block-title">{{ plugData.Title.split("|")[0] }}</h2>
+      <h2 class="block-title" style="line-height: normal !important;">{{ plugData.Title.split("|")[0] }}</h2>
       <p class="title-teaser">{{ plugData.SubTitle }}</p>
       <ul class="pd-list" v-if="showType == 1">
         <li
@@ -40,27 +40,17 @@
           </a>
         </li>
       </ul>
-      <div class="row q-col-gutter-md" style="item" v-else-if="showType == 2">
+      <div class="q-col-gutter-md  q-mt-md" :class="{'row':$q.platform.is.desktop,'':$q.platform.is.mobile}" v-else-if="showType == 2">
         <template v-for="(item, index) in plugData.Details">
           <div
-            class="col-3 relative-position column"
+            class="relative-position "
             :key="index"
+            :class="{'col-3 column':$q.platform.is.desktop}"
             v-if="item.TripImageUrl"
           >
             <div
               class="absolute-top-left q-pa-sm"
-              style="
-                background: linear-gradient(
-                  to bottom,
-                  rgba(0, 0, 0, 0.5),
-                  rgba(0, 0, 0, 0)
-                );
-                top: 16px;
-                left: 16px;
-                right: 0;
-                border-radius: 12px;
-                z-index: 1;
-              "
+              style="background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));top: 16px;left: 16px;right: 0;border-radius: 12px;z-index: 1;"
             >
               <div
                 class="text-grey-4"

src/components/navs/city-category.vue

@@ -479,9 +479,7 @@ export default {
       }
     },
     handleSelectArea(item) {
-      this.CommonJump("/city/" + item.Id, {
-        id: item.Id,
-      });
+      this.CommonJump("/city/" + item.Id);
     },
     handleCategoryChage(item) {
       this.CommonJump("/search", {

src/pages/Index.vue

@@ -266,7 +266,7 @@
         ></travelList>
       </div>
     </template>
-    <end-page v-if="isPic"></end-page>
+    <end-page v-if="isPic" class="desktop-only"></end-page>
   </q-page>
 </template>
 

src/utils/producttypeenum.js

@@ -7,14 +7,14 @@ const ProductTypeEnum = Object.freeze({
      */
     ONE_DAY: {
         value: 1,
-        desc: '一日游产品'
+        desc: '當地遊产品'
     },
     /**
      * 多日游
      */
     TEAM_TRIP: {
         value: 2,
-        desc: '多日游产品'
+        desc: '出境遊产品'
     },
     /**
      * 小包团