优化页面

weiyunpeng · Aug 21, 2017 · 7f5a56a · 7f5a56a
1 parent a0fa368
commit 7f5a56a
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 103 deletions.
diff --git a/server/server/site/data/view_photo.json b/server/server/site/data/view_photo.json
@@ -1,65 +1,5 @@
 {
-    "code": 0,
-    "msg": "success",
-    "data": {
-        "id": 1,
-        "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170805/59858d13dd743510153737.jpg",
-        "fav_num": 3,
-        "tag": "欧美大气",
-        "desc": "",
-        "time": "2017.04.06",
-        "comment": "拍摄于 蒙娜丽莎婚纱摄影  所属风格 旅拍【清水湾】风格任拍+6000超值礼包",
-        "comment_url": "http://www.baidu.com",
-        "list": [
-            {
-                "id": 1,
-                "img": "http://marriage-1251225286.image.myqcloud.com/none/photos/20170818/5996efc031f5b249731766.jpg?imageView2/2/w/280/h/",
-                "fav_num": 3,
-                "tag": "欧美大气",
-                "is_fav": 0
-            },
-            {
-                "id": 2,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/59926e56c3757097728578.jpg?imageView2/2/w//h/",
-                "fav_num": 1,
-                "tag": "欧美大气",
-                "is_fav": 1
-            },
-            {
-                "id": 3,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993a8ef57b67410329589.jpg?imageView2/2/w//h/",
-                "fav_num": 1,
-                "tag": "欧美大气",
-                "is_fav": 1
-            },
-            {
-                "id": 4,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/5992b1111a7bd407866841.png?imageView2/2/w//h/",
-                "fav_num": 3,
-                "tag": "小清新",
-                "is_fav": 0
-            },
-            {
-                "id": 5,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef632e651907595346.jpg?imageView2/2/w//h/",
-                "fav_num": 1,
-                "tag": "小清新",
-                "is_fav": 0
-            },
-            {
-                "id": 6,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170816/5993ef63a9ecd993906222.jpg?imageView2/2/w//h/",
-                "fav_num": 1,
-                "tag": "小清新",
-                "is_fav": 0
-            },
-            {
-                "id": 6,
-                "img": "http://marriage-1252045209.image.myqcloud.com/none/photos/20170815/59926e55d47f9148376014.jpg?imageView2/2/w//h/",
-                "fav_num": 1,
-                "tag": "小清新",
-                "is_fav": 0
-            }
-        ]
-    }
+    "code": -1,
+    "msg": "图片不存在或已删除",
+    "data": ""
 }
diff --git a/src/assets/css/busDetails.scss b/src/assets/css/busDetails.scss
@@ -148,6 +148,11 @@ background-color: #fff;
                     color: #fff;
                     font-size: 18px;
                 }
+                a:hover{
+                    background-color: #d9344f;
+                    -webkit-transition: all .3s ease;
+                    transition: all .3s ease;
+                }
                 .erweima {
                     position: absolute;
                     left: 50%;
@@ -193,19 +198,25 @@ background-color: #fff;
           color: #ff506d;
         }
     }
+    .more {
+        margin-bottom: 12px;
+        .more_a {
+            font-size: 16px;
+            color: #808080;
+        }
+        .more_a:hover {
+            color: #fd4040;
+            -webkit-transition: all .3s ease;
+            transition: all .3s ease;
+        }
+    }
     .case {
         .tit {
             width: 1200px;
             height: 42px;
             margin-top: 50px;
         }
-        .more {
-            margin-bottom: 12px;
-            .more_a {
-                font-size: 16px;
-                color: #808080;
-            }
-        }
+
         .list {
             margin-right: -42px;
             >ul>li {
@@ -255,13 +266,6 @@ background-color: #fff;
             height: 42px;
             margin: 10px 0;
         }
-        .more {
-            margin-bottom: 12px;
-            .more_a {
-                font-size: 16px;
-                color: #808080;
-            }
-        }
         .list {
             margin-right: -42px;
             >ul>li {
@@ -323,14 +327,22 @@ background-color: #fff;
                 display: inline-block;
                 width: 46px;
                 height: 20px;
-                background: url("/static/images/arrow.png");
+                background: url("/static/images/arrow.png") no-repeat;
             }
             .prev {
                 background-position: left top;
             }
+            .prev:hover {
+                background: url("/static/images/arrow-hover.png") no-repeat;
+                background-position: -6px -6px;
+            }
             .next {
                 background-position: right top;
             }
+            .next:hover {
+                background: url("/static/images/arrow-hover.png") no-repeat;
+                background-position: -58px -6px;
+            }
         }
         .list {
             margin-right: -25px;
@@ -461,9 +473,17 @@ background-color: #fff;
                 .prev {
                     background-position: left top;
                 }
+                .prev:hover {
+                    background: url("/static/images/arrow-hover.png") no-repeat;
+                    background-position: -6px -6px;
+                }
                 .next {
                     background-position: right top;
                 }
+                .next:hover {
+                    background: url("/static/images/arrow-hover.png") no-repeat;
+                    background-position: -58px -6px;
+                }
             }
             ul {
                 margin-right: -30px;

diff --git a/src/assets/css/common.css b/src/assets/css/common.css
@@ -1837,4 +1837,9 @@ fieldset[disabled] .btn-danger.focus {
     position: relative;
     top:80px;
     text-align: center;
+}
+.u-index-nav:hover {
+    color: #fd4040;
+    -webkit-transition: all .3s ease;
+    transition: all .3s ease;
 }
diff --git a/src/assets/css/mealDetails.scss b/src/assets/css/mealDetails.scss
@@ -93,6 +93,11 @@
           color: #fff;
           font-size: 18px;
         }
+        a:hover{
+            background-color: #d9344f;
+            -webkit-transition: all .3s ease;
+            transition: all .3s ease;
+        }
         .erweima {
           position: absolute;
           left: 50%;
@@ -137,6 +142,9 @@
       }
       .item {
         position: relative;
+        padding-top: 25px;
+        padding-bottom: 25px;
+        border-bottom: 1px solid #e6e6e6;
         .strategy {
           z-index: 99;
           position: absolute;
@@ -152,9 +160,11 @@
           line-height: 30px;
           text-align: center;
         }
-        padding-top: 25px;
-        padding-bottom: 25px;
-        border-bottom: 1px solid #e6e6e6;
+        .strategy:hover{
+            background-color: #d9344f;
+            -webkit-transition: all .3s ease;
+            transition: all .3s ease;
+        }
         dl {
           margin-top: 20px;
           font-size: 16px;

diff --git a/src/components/bigImg.vue b/src/components/bigImg.vue
@@ -103,7 +103,7 @@ export default {
         top: 8px;
       }
       ul{
-          width: 100%;
+          width: 99%;
           height: 100%;
           white-space: nowrap;
           overflow: hidden;
@@ -125,10 +125,30 @@ export default {
         .prev {
           background-position: top left;
           left: 0;
+          filter: alpha(Opacity=60);
+            -moz-opacity: 0.6;
+            opacity: 0.6;
+        }
+        .prev:hover{
+            filter: alpha(Opacity=100);
+            -moz-opacity: 1;
+            opacity: 1;
+            -webkit-transition: all .3s ease;
+            transition: all .3s ease;
         }
         .next {
           right: 8px;
           background-position: top right;
+          filter: alpha(Opacity=60);
+            -moz-opacity: 0.6;
+            opacity: 0.6;
+        }
+        .next:hover{
+            filter: alpha(Opacity=100);
+            -moz-opacity: 1;
+            opacity: 1;
+            -webkit-transition: all .3s ease;
+            transition: all .3s ease;
         }
       }
     }

diff --git a/src/components/photoModal.vue b/src/components/photoModal.vue
@@ -23,8 +23,10 @@
                     </div>
                 </div>
 
+                <p class="pg_name">TA的套系</p>
+
                 <div class="photo_fr fr">
-                    <p class="pg_name">TA的套系</p>
+
                     <waterfall :line-gap="200" :min-line-gap="140" :max-line-gap="140" :single-max-width="140" :watch="getViewPhoto">
                         <waterfall-slot v-for="(item, index) in getViewPhoto" :width="item.width" :height="item.height" :order="index" :key="item.index" move-class="photo_move">
                             <img :src="item.img" class="water_img" v-bind:class="{cur: selected == index}" @click="changeSwiper(item,index)">
@@ -182,12 +184,6 @@ export default {
                 self.photoInfo = this.getViewPhotoInfo
             }
         },
-        getViewPhotoStatus(){
-            const self = this;
-            if(this.getViewPhotoStatus == -1){
-                setTimeout(() => self.close(), 2000)
-            }
-        },
         photoModal(){
             if(this.photoModal.src){
                 this.isCase = false
@@ -260,6 +256,8 @@ export default {
     font-size: 16px;
     color: #4c4c4c;
     line-height: 28px;
+    position: relative;
+    left: 50px;
 }
 
 .close_btn {

diff --git a/src/components/user/userHead.vue b/src/components/user/userHead.vue
@@ -411,7 +411,6 @@ export default {
             margin-right: 0;
         }
         .nav_a:hover {
-            border-bottom: 3px solid #ff4e6b;
             color: #ff4e6b;
         }
         .nav_active {

diff --git a/src/page/comment.vue b/src/page/comment.vue
@@ -92,15 +92,14 @@
                                 </ul>
                             </li>
                             <li class="list-con-btn" v-if="item.comments && item.comments.length>2">
-                                <div v-if="item.showAll">
-                                    <a href="javascript:void(0)" @click="showBtn(busIndex,false)">
+                                <div v-if="item.showAll" @click="showBtn(busIndex,false)">
+                                    <a href="javascript:void(0)" >
                                         <i class="icon-angle-act"></i>
                                         <span>收 起</span>
                                     </a>
-
                                 </div>
-                                <div v-else-if="!item.showAll">
-                                    <a href="javascript:void(0)" @click="showBtn(busIndex,true)">
+                                <div v-else-if="!item.showAll" @click="showBtn(busIndex,true)">
+                                    <a href="javascript:void(0)" >
                                         <i class="icon-angle"></i>
                                         <span>展示全部</span>
                                     </a>

diff --git a/src/page/index.vue b/src/page/index.vue
@@ -213,9 +213,4 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 @import "./../assets/css/index.scss";
-.u-index-nav:hover {
-    color: #fd4040;
-    -webkit-transition: all .3s ease;
-    transition: all .3s ease;
-}
 </style>
diff --git a/src/page/meal.vue b/src/page/meal.vue
@@ -139,7 +139,7 @@ export default {
     .list_con {
         display: inline-block;
         width: 374px;
-        height: 319px;
+        height: 346px;
         overflow: hidden;
         margin: {
             right: 28px;

diff --git a/src/store/actions.js b/src/store/actions.js
@@ -7,7 +7,7 @@ export const showMsg = ({ commit }, data) => {
     const id = new Date().getTime();
     data.id = id;
     commit(types.SHOW_MSG, data);
-    setTimeout(() => commit(types.HIDE_MSG, id), 2000)
+    setTimeout(() => commit(types.HIDE_MSG, id), 1000)
 };
 
 export const hideMsg = ({ commit }, id) => {

diff --git a/src/store/modules/viewPhoto.js b/src/store/modules/viewPhoto.js
@@ -11,11 +11,12 @@ const state = {
 
 const mutations = {
     [VIEW_PHOTO_MODAL](state, data) {
+        state.photoModelStatus = 0;
         state.list = data.data.list;
         state.photoInfo = data.data;
     },
     [HIDE_PHOTO_MODAL](state, data) {
-        state.list = null;
+        state.list = [];
         state.photoInfo = null;
         state.photoModelStatus = -1;
     },

diff --git a/static/images/arrow-hover.png b/static/images/arrow-hover.png