css 调整

public/index.html

@@ -4,7 +4,18 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="apple-touch-icon-precomposed" href="<%= BASE_URL %>icon_h_1500px.png">
+    <meta property="og:title" content="日帰り旅行">
+    <meta property="og:description" content="日帰り旅行　いつもの休日を楽しみに">
+    <meta property="og:type" content="">
+    <meta property="og:url" content="">
+    <meta property="og:image" content="sharebg.png">
+    <meta property="og:site_name" content="日帰り旅行">
+    <meta property="og:locale" content="ja_JP">
+    <meta name="twitter:card" content="sharebg.png">
+    <meta name="twitter:site" content="日帰り旅行">
     <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
     <script src="<%= BASE_URL %>vconsole.min.js"></script>
     <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->

src/assets/font/iconfont.css

@@ -21,6 +21,10 @@
   content: "\e64b";
 }
 
+.icon-home:before {
+  content: "\e657";
+}
+
 .icon-lvyou:before {
   content: "\e657";
 }

src/components/pages/nav.vue

@@ -154,6 +154,7 @@ export default {
             line-height: 0.44rem /* 44/100 */;
 
         }
+
         .navOut {
             position: absolute;
             top: 0;

src/lang/ja.js

@@ -28,8 +28,8 @@ export default {
         stock: '残り席',
         validity: '有効期間',
         to: '〜',
-        receive: '今すぐ入手',
-        received: '受け取った',
+        receive: 'クーポンを獲得する',
+        received: '獲得しました',
         journey: '行程詳細',
         outline: '概要',
         comment: 'コメント',

src/views/home/home.vue

@@ -1,5 +1,8 @@
 <template>
     <div id="home">
+        <div class="navLogo">
+            <img src="../../../public/static/images/logo.png">
+        </div>
         <Nav :title="$t('home.title')" :iconType="false"></Nav>
         <div class="search">
             <van-search v-model="searchValue" @search="onSearch" shape="round" :placeholder="$t('home.searchPlaceholder')" />
@@ -39,9 +42,9 @@
                     <div class="cell" @click="getSpecialArea('island',item)" v-for="item,index in classificationList" :key="index" :style="{background:'url('+requestUrl+item.typeImg+') no-repeat'}">
                         <div>
                             <span>{{item.typeName}}</span>
-                            <span>
+                            <!--span>
                                 <van-icon name="arrow" />
-                            </span>
+                            </span-->
                         </div>
                     </div>
                 </div>
@@ -58,7 +61,7 @@
             <div class="content">
                 <div class="rankBox">
                     <div class="rankitem"  v-for="item,index in rankList" :key="index" @click="getCommodity(item)">
-                        <div class="tagBox">
+                        <div class="tagBox mybkkd">
                             <span>{{index+1}}</span>
                         </div>
                         <div class="ranktit center">
@@ -333,8 +336,8 @@ export default {
                 font-size: 0.16rem /* 16/100 */;
                 color: #333333;
                 font-weight:600;
-                border-left: 0.04rem solid #38d0c9;
-                padding-left: 0.09333rem;
+                /*border-left: 0.04rem solid #38d0c9;
+                padding-left: 0.09333rem;*/
             }
             .right {
                 font-size: 0.13rem /* 13/100 */;
@@ -360,7 +363,7 @@ export default {
             padding: 0.1rem /* 10/100 */ 0;
             .cell {
                 width: 47%;
-                margin-left: 3%;
+                margin: 0 0 3% 3%;
                 // height: 1.5rem /* 124/100 */;
                 overflow: hidden;
                 background: #fff;
@@ -401,8 +404,8 @@ export default {
                 font-size: 0.16rem /* 16/100 */;
                 color: #333333;
                 font-weight:600;
-                border-left:0.04rem solid #38d0c9;
-                padding-left:.09333rem;
+                /*border-left:0.04rem solid #38d0c9;
+                padding-left:.09333rem;*/
 
             }
             .right {
@@ -422,30 +425,38 @@ export default {
                 padding: 0.05rem /* 15/100 */;
                 font-size: 0.14rem /* 15/100 */;
                 .cell {
-                    width: 31%;
+                    width: 48%;
                     height: 1.2rem /* 120/100 */;
                     display: flex;
                     align-items: flex-end;
 
 
-                    border-radius: 0.05rem;
+                    border-radius: 0.08rem;
                     aspect-ratio: 6/8 !important;
                     box-shadow: 0px 0px 5px #e9e9e9;
                     > div {
                         width: 100%;
-                        height: 36px;
+                        height: 100%;
+                        border-radius: 0.08rem;
                         display: flex;
                         justify-content: space-between;
                         align-items: center;
+                        text-align:center;
                         padding: 0.1rem /* 10/100 */;
                         box-sizing: border-box;
-                        background-color:#fff;
-                        opacity:.8;
+                        background-color:rgba(0,0,0,0.5);
+
                         > span:nth-child(1) {
-                            color: #333;
+                            color: #fff;
+                            width:100%;
+                            font-weight:600;
+                            font-size:0.15rem;
+                            opacity:1;
+
                         }
                         > span:nth-child(2) {
                             display: block;
+                            display:none;
                            /* height: 0.2rem  20/100 ;*/
                             width: 0.2rem /* 20/100 */;
                             border-radius: 50%;
@@ -512,25 +523,24 @@ export default {
                     position:relative;
                     margin-bottom: 0.1rem;
                     .tagBox {
-                        width: .2533rem;
-                        height: .3133rem;
-                        line-height: .2133rem;
+
+                        line-height: .07rem;
                         /*background: url("../../../public/static/images/tagBg.png");*/
                         position: absolute;
                         left: 0;
                         top: 0;
                         z-index: 1;
                         font-size: 0.16rem /* 16/100 */;
-                        text-align: left;
+                        text-align: center;
                         font-weight:600;
-                        background-color:#38d0c9;
+                        /*background-color:#38d0c9;
                         border-color:#38d0c9;
-                        border-bottom-right-radius:.14667rem;
+                        border-bottom-right-radius:.14667rem;*/
 
 
                         span {
                             margin-top: 0rem /* 5/100 */;
-                            margin-left: .08rem /* 5/100 */;
+                            margin-left: .0rem /* 5/100 */;
                             display: inline-block;
                             font-family:PingFangSC-Regular;
                             color: #fff;
@@ -544,10 +554,12 @@ export default {
                     font-weight:600;
                     padding-left:0.4533rem;
                     text-align:left;
+                    padding-right:0.1rem;
+                    box-sizing: border-box;
                 }
                 .cell {
                     width: 100%;
-                    height: 1.39rem /* 139/100 */;
+                    /*height: 1.39rem  139/100 */;
 
                     display: flex;
                     padding: 0.12rem /* 12/100 */;
@@ -598,8 +610,8 @@ export default {
                                 display: -webkit-box; /*盒子模型微弹性伸缩模型*/
                                 -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
                                 -webkit-line-clamp: 3; /*文本显示3行*/
-                                color:#bb271a;
-                                font-size:0.23rem;
+                                color:#e94225;
+                                font-size:0.20rem;
                             }
                             > div:nth-child(2) {
                                 color: #e94225;
@@ -657,4 +669,44 @@ export default {
     width:100%;
     display:block;
 }
+
+.mybkkd
+{
+  width: 0.26rem;
+  height: 0.2233rem;
+  box-sizing: content-box;
+  padding-top: 13px;
+  position: relative;
+  /*background: #38d0c9;*/
+  background-image: linear-gradient(#adebc3,#38d0c9);
+  color: white;
+  text-transform: uppercase;
+}
+.mybkkd:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-bottom: 7px solid #fff;
+  border-left: 0.13rem solid transparent;
+  border-right: 0.13rem solid transparent;
+}
+.navLogo {
+     font-size: 0.17rem /* 16/100 */;
+     font-weight:500;
+     text-align: center;
+     width: 100%;
+     height: 0.40rem /* 44/100 */;
+     position:absolute;
+     left: 0;
+     background-color:#fff;
+     z-index: 999999999999;
+}
+.navLogo  img{
+     max-height: 0.40rem;
+
+
+}
 </style>

src/views/home/pages/productDetails/productDetails.vue

@@ -39,7 +39,7 @@
                 </div>
                 <div class="right">
                     <van-skeleton :row="1" :loading="loading">
-                        <span><span class="yen">￥</span>{{commodityDetails.commodity.commodityCouponList[0].discountPrice}}</span>
+                        <span><span class="yen"></span>{{commodityDetails.commodity.commodityCouponList[0].discountPrice}}円OFF</span>
                     </van-skeleton>
                     <span @click="receive" v-if="commodityDetails.commodity.couponUser=='0'">{{$t('productDetails.receive')}}</span>
                     <span v-else>{{$t('productDetails.received')}}</span>
@@ -145,11 +145,16 @@
                         <div class="left">
                             <img :src="requestUrl+item.faceImg" alt="" srcset="">
                         </div>
-                        <div class="center">
+                        <!--div class="center">
                             <span>{{item.commodityName}}</span>
                         </div>
                         <div class="right">
                             <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
+                        </div-->
+                        <div class="center">
+                            <span>{{item.commodityName}}</span>
+
+                            <span class="right">¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
                         </div>
                     </div>
                 </div>
@@ -782,7 +787,7 @@ export default {
                 flex-direction: column;
                 span:nth-child(1) {
                     color: #fff;
-                    font-size: 0.2rem /* 20/100 */;
+                    font-size: 0.3rem /* 20/100 */;
                 }
                 span:nth-child(2) {
                     font-size: 14px;
@@ -791,24 +796,25 @@ export default {
             }
         }
     }
+
     .discount {
-        // height: .82rem /* 82/100 */;
-        // border: 1px solid #000;
-        margin-top: 0.05rem /* 5/100 */;
-        /*border-radius: 0.1rem 0.1rem .5rem .5rem;
-        background-image: linear-gradient(#e5585f,#fff);*/
+        position:relative;
         display: flex;
-        padding: 0.12rem /* 15/100 */;
-        border-bottom:1px #d85158 solid;
-        background-color: #fcf2f1;
+        width:96%;
+        margin:0.14rem auto;
+        height: 109px;
+        filter: drop-shadow(0 1.9px 3px rgba(0,0,0,.25));
+
+
         .left {
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: flex-start;
-            width: 70%;
-            box-sizing: border-box;
+            width: 50%;
+            padding-left:10%;
             color: #3e3a39;
+            z-index:999;
             span:nth-child(1) {
                 font-size: 0.14rem /* 16/100 */;
                 margin: 0.02rem /* 5/100 */ 0;
@@ -821,17 +827,18 @@ export default {
             }
         }
         .right {
+            z-index:999;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            width: 30%;
+            width: 40%;
             box-sizing: border-box;
             border-left: 1px dashed #fff;
-            color: #e56051;
+            color: #fc8382;
             font-weight:600;
             span:nth-child(1) {
-                font-size: 0.5rem /* 30/100 */;
+                font-size: 0.2rem /* 30/100 */;
                 vertical-align: 1px;
             }
             span:nth-child(1) .yen {
@@ -839,10 +846,30 @@ export default {
                 font-size:0.14rem;
             }
             span:nth-child(2) {
-                font-size: 0.12rem /* 16/100 */;
+                font-size: 0.10rem /* 16/100 */;
+                background: #fc8382;
+                border-radius: 20px;
+                padding: 3px 15px;
+                color: #fff;
             }
         }
     }
+    .discount::before {
+        content: "";
+        z-index: 0;
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        margin:0 auto;
+        background-size: 55% 100%,55% 100%;
+        background-repeat: no-repeat;
+        background-position: 0 50%,100% 50%;
+        border-radius: 4px;
+        background-image: radial-gradient(circle at center left,transparent 0,transparent 11px,#fededc 12px),radial-gradient(circle at center right,transparent 0,transparent 11px,#fededc 12px);
+        background-size: calc(55% + 1px) 100%,calc(55% + 1px) 100%;
+     }
+
     .titleStyle {
         // width: 100%;
         // padding: .1rem /* 10/100 */;
@@ -855,8 +882,7 @@ export default {
             padding: 0.15rem /* 15/100 */;
             box-sizing: border-box;
             > span {
-                border-left: 2px solid #38d0c9;
-                padding: 0 0.05rem /* 5/100 */;
+               padding: 0 /* 5/100 */;
             }
         }
         .contents {
@@ -1014,19 +1040,22 @@ export default {
                     }
                 }
                 .center {
-                    width: 1rem /* 150/100 */;
-                    font-size: 0.15rem /* 15/100 */;
+                    width: 2rem /* 150/100 */;
+                    font-size: 0.13rem /* 15/100 */;
                     font-weight: bold;
                     text-align: justify;
+                    line-height:1.2;
                     padding: 0 0.12rem /* 12/100 */;
                 }
                 .right {
                     padding-top: 0.03rem /* 3/100 */;
-                    width: 1rem /* 50/100 */;
+                    width: 2rem /* 50/100 */;
                     font-size: 0.15rem /* 15/100 */;
                     color: #e94225;
                     font-weight: bold;
+                    display:block;
                 }
+
             }
         }
     }

src/views/home/pages/specialArea/specialArea.vue

@@ -3,7 +3,7 @@
     <div id="specialArea">
         <Nav :title="navTitle"></Nav>
         <div class="search">
-            <van-search v-model="searchValue" @search="onSearch" shape="round" background="#F9F9F9" :placeholder="$t('specialArea.searchPlaceholder')" />
+            <van-search v-model="searchValue" @search="onSearch" shape="round" :placeholder="$t('specialArea.searchPlaceholder')" />
         </div>
         <div class="content">
             <div class="rankBox">
@@ -20,9 +20,11 @@
                                 <div class="center">
                                     <span>{{item.commodityName}}</span>
                                 </div>
-                                <div class="right">
-                                    <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
-                                </div>
+
+                            </div>
+                            <div class="pricebox">
+                                <span>¥{{item.childPrice}} - ¥{{item.adultPrice}}</span>
+
                             </div>
                             <div>
                                 <span>{{item.fwb}}</span>
@@ -291,7 +293,8 @@ export default {
                 box-shadow: 0px 0px 5px #e9e9e9;
                 .left {
                     width: 38%;
-                    border-radius: 5px;
+                    height:1rem;
+                    border-radius: 0.08rem;
                     overflow: hidden;
                     position: relative;
                     img {
@@ -320,7 +323,7 @@ export default {
                 .right {
                     padding-top: 0.03rem /* 3/100 */;
                     width: 72%;
-                    font-size: 0.15rem /* 15/100 */;
+                    font-size: 0.13rem /* 15/100 */;
                     display: flex;
                     flex-direction: column;
                     justify-content: space-between;
@@ -330,16 +333,17 @@ export default {
                         max-height: 0.63rem;
                         display: flex;
                         padding: 0 0 0 0.12rem;
-                        font-weight: bold;
+
                         box-sizing: border-box;
                         > div:nth-child(1) {
                             text-align: justify;
-                            color: #38d0c9;
+                            /*color: #38d0c9;*/
                             width: 55%;
+                            width:100%;
                             overflow: hidden;
                             display: -webkit-box; /*盒子模型微弹性伸缩模型*/
                             -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
-                            -webkit-line-clamp: 3; /*文本显示3行*/
+                            -webkit-line-clamp: 2; /*文本显示3行*/
                         }
                         > div:nth-child(2) {
                             color: #e94225;
@@ -353,6 +357,21 @@ export default {
                     > div:nth-child(2) {
                         margin-top: 0.05rem;
                         width: 100%;
+
+                        text-align: left;
+                        padding: 0 0 0 0.12rem;
+                        color: #bb271a;
+                        font-weight:600;
+                        font-size:0.15rem;
+                        box-sizing: border-box;
+                        overflow: hidden; /*文本超出隐藏*/
+                        display: -webkit-box; /*盒子模型微弹性伸缩模型*/
+                        -webkit-box-orient: vertical; /*伸缩盒子的子元素垂直排列*/
+                        -webkit-line-clamp: 2; /*文本显示3行*/
+                    }
+                    > div:nth-child(3) {
+                        margin-top: 0.05rem;
+                        width: 100%;
                         // height: 0.37rem;
                         max-height: 0.37rem;
                         text-align: left;
@@ -372,10 +391,11 @@ export default {
 </style>
 <style>
 #specialArea .van-search__content {
-    border: 1px solid #6acdc8;
+    /*border: 1px solid #6acdc8;*/
+    background-color:#f6f6f6;
 }
-#specialArea .content .rankBox .cell .right > div:nth-child(2) > span {
-    font-size: 0.15rem;
-    line-height: 0.2rem;
+#specialArea .content .rankBox .cell .right > div:nth-child(3) > span {
+    font-size: 0.12rem;
+    line-height: 1.2;
 }
 </style>

src/views/news/pages/details/details.vue

@@ -74,8 +74,8 @@ export default {
             }
             .information {
                 font-size: 0.12rem /* 14/100 */;
-                text-align: left;
-                padding: 0.15rem /* 15/100 */ 0;
+                text-align: right;
+                padding: 0 0.15rem /* 15/100 */ 0;
             }
             .text {
                 font-size: 0.14rem /* 14/100 */;

src/views/personal/pages/myCollection/myCollection.vue

@@ -24,7 +24,7 @@
                                     <span>{{$t('myCollection.category')}}:{{item.commodityTypeName}}</span>
                                 </div>
                                 <div class="right">
-                                    <van-icon @click="deletes(item.id)" name="delete-o" color="#999999" size="14" />
+                                    <van-icon @click="deletes(item.id)" name="delete-o" color="#999999" size="18" />
                                 </div>
                             </div>
                         </div>
@@ -211,6 +211,7 @@ export default {
                             display: flex;
                             justify-content: flex-start;
                             align-items: flex-end;
+                            font-size:0.12rem;
                         }
                         > div:nth-child(2) {
                             width: 20%;

src/views/personal/pages/myTracks/myTracks.vue

@@ -25,7 +25,7 @@
                                         <span>{{$t('myTracks.category')}}:{{item.commodityTypeName}}</span>
                                     </div>
                                     <div class="right">
-                                        <van-icon @click="deletes(item.id)" name="delete-o" color="#999999" size="14" />
+                                        <van-icon @click="deletes(item.id)" name="delete-o" color="#999999" size="18" />
                                     </div>
                                 </div>
                             </div>
@@ -235,6 +235,8 @@ export default {
                                 display: flex;
                                 justify-content: flex-start;
                                 align-items: flex-end;
+                                font-size:0.12rem;
+
                             }
                             > div:nth-child(2) {
                                 width: 20%;

src/views/personal/personal.vue

@@ -245,17 +245,19 @@ export default {
                 justify-content: space-between;
                 padding: 0.1rem /* 10/100 */ 0;
                 > div:nth-child(1) {
-                    font-size: 0.17rem /* 17/100 */;
+                    font-size: 0.15rem /* 17/100 */;
                     text-align:left;
                     font-weight:600;
+                    padding-right:50px;
                 }
                 > div:nth-child(2) {
                     font-size: 0.12rem /* 14/100 */;
                     color: #818181;
                     padding-left:30px;
                     border: 1px #818181 solid;
-                    border-radius: 30px;
-                    padding: 0 20px;
+                    border-radius: 20px;
+                    padding: 0 5px;
+                    width:30%;
                     > span {
                         margin-left: 0.03rem /* 3/100 */;
                     }
@@ -267,16 +269,16 @@ export default {
                 padding: 0.1rem /* 10/100 */ 0;
             }
             .cell {
-                background-image: linear-gradient(#38d0c9, #adebc3);
-
+                /*background-image: linear-gradient(#38d0c9, #adebc3);*/
+                background-color:#fff;
                 padding: 0.12rem /* 12/100 */;
                 box-sizing: border-box;
                 border-radius: 15px 15px 0 0;
                 .title {
                     font-size: 0.14rem /* 14/100 */;
-                    color: #fff;
                     text-align: left;
                     // padding: .08rem /* 8/100 */ 0;
+                    font-weight:600;
                 }
                 .list {
                     padding: 0.12rem /* 12/100 */ 0;
@@ -288,21 +290,27 @@ export default {
                     justify-content: space-between;
                     > div {
                         width: 25%;
-                        height: 0.5rem /* 42/100 */;
+                        height: 0.6rem /* 42/100 */;
                         display: flex;
                         align-items: center;
                         justify-content: space-between;
                         flex-direction: column;
-                        color: #fff;
+
+                        box-sizing: border-box;
                         margin: 0.1rem /* 10/100 */ 0;
                         > div {
-                            height: 0.24rem /* 24/100 */;
+                            height: 0.34rem /* 24/100 */;
                             width: 100%;
                             > img {
                                 height: 100%;
                             }
                         }
                     }
+                    > div:nth-child(1) {
+                        /*background-image: linear-gradient(#6fc6c4, #6fc6c4);*/
+                    }
+
+
                 }
             }
         }
@@ -349,10 +357,10 @@ export default {
                 }
             }
             > div:nth-child(1) {
-                background-image: linear-gradient(#adebc3, #fff);
+                /*background-image: linear-gradient(#adebc3, #fff);*/
                 }
             > div:nth-child(2) {
-                background-image: linear-gradient(#eef3f2, #fff);
+                /*background-image: linear-gradient(#eef3f2, #fff);*/
                 }
         }
     }