添加佛前供灯

src/pages/goods-detail/index.vue

@@ -14,6 +14,13 @@
                 <span>已有{{data.sales || 0}}人参与</span>
             </div>
         </div>
+        <div class="temple-info">
+            <img class="temple-img" :src="data.cover_url" alt="">
+            <div class="temple-name">
+                <h4 class="name">铜梁古佛寺</h4>
+                <p class="visitor">已有 <span>1525</span> 人到访过</p>
+            </div>
+        </div>
         <div class="divider"></div>
         <div class="panel">
             <div class="panel-head">
@@ -49,7 +56,7 @@
                     </ul>
                 </div>
                 <transition>
-                    <template>
+                    <template >
                         <select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
                         <fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
                     </template>
@@ -82,6 +89,7 @@ export default {
     },
     data(){
         return {
+            result: 'a',
             showAnyAmount: false,
             paddingBottom: 0,
             fixedBottomHeight: 0,
@@ -130,7 +138,8 @@ export default {
                 return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100
             }
             return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
-        }
+        },
+
     },
     mounted(){
         this.getGoodsDetail('common');
@@ -212,6 +221,7 @@ export default {
 </script>
 
 <style lang="scss">
+$lightWidth: 1.3rem;
 .goods-detail{
     .goods-content{
         padding-left: .3rem;
@@ -221,6 +231,65 @@ export default {
             font-size: .35rem;
         }
     }
+    .light-container{
+        padding-left: .4rem;
+        padding-right: .4rem;
+        max-height: 10rem;
+        overflow: auto;
+        .light-wrapper{
+            border-top: 1px solid #ddd;
+            h1{
+                font-size: .4rem;
+                margin-top: .4rem;
+                margin-bottom: 3px;
+            }
+            .light-group{
+                img.light-icon{
+                    width: $lightWidth;
+                    height: $lightWidth;
+                    vertical-align: top;
+                }
+                span{
+                    font-size: .4rem;
+                    display: block;
+                    text-align: center;
+                    padding-top: .3rem;
+                }
+            }
+            .van-swipe__indicators {
+                bottom: 0rem;
+                .van-swipe__indicator {
+                    width: 20px;
+                    height: 2px;
+                    border-radius: 10px;
+                    background: #bbb;
+                }
+                .van-swipe__indicator--active {
+                    background: $primary-color;
+                }
+            }
+        }
+        .light-size,
+        .light-count{
+            font-size: .4rem;
+            display: flex;
+            justify-content: space-between;
+            margin-top: .6rem;
+            align-items: center;
+            margin-bottom: .65rem;
+            span{
+                color: black;
+                opacity: 1;
+            }
+        }
+        .light-size{
+            margin-top: 1.1rem;
+        }
+        .light-count{
+            align-items: center;
+            margin-bottom: .2rem;
+        }
+    }
     .support{
         margin-bottom: .5rem;
         .support-head{
@@ -257,13 +326,13 @@ export default {
     }
     .monk-profile{
         padding: .4rem;
-        margin-bottom: .53rem;
         .position{
             font-size: .5rem;
             padding-top: .2rem;
             color: #19282E;
             line-height: 1.3;
         }
+
         .introduction{
             font-size: .37rem;
             margin-top: .4rem;
@@ -287,7 +356,32 @@ export default {
             color: #666;
             font-size: .28rem;
         }
-    }   
+    }
+    .temple-info{
+        border-top: 1px solid #ddd;
+        padding: .3rem .4rem;
+        display: flex;
+        align-items: center;
+        .temple-img{
+            width: 1rem;
+            height: 1rem;
+            border-radius: 1rem;
+            margin-right: .3rem;
+        }
+        .temple-name{
+            flex: 1;
+            .name{
+                font-size: .35rem;
+                color: #333;
+            }
+            .visitor{
+                color: #666;
+                font-size: .3rem;
+                margin-top: .2rem;
+                display: block;
+            }
+        }
+    }
     .detail-button-group{
 		text-align: center;
 		position: fixed;