xcx

src/module/user/majorProjectsDetail/index.vue

@@ -12,12 +12,42 @@
             </div>
           </div>
         </div>
+        <div class="subContent time">
+          <h5>时间</h5>
+          <span>2018年03月03日~2018年03月21日</span>
+          <div class="list flex-h">
+            <div class="flex-item">
+              <ul :class="{'show':showMoreCourse}">
+                <li v-for="(item,index) in 10" :key="index">03/21 周六 14:00~17:30</li>
+              </ul>
+              <a class="moreCourse" @click="triggerCourseTime">
+                {{showMoreCourse ? '收起' : '更多'}}
+                <i v-if="!showMoreCourse" class="iconfont icon-jiantou-down"></i>
+                <i v-if="showMoreCourse" class="iconfont icon-jiantou-up"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div style="width:100%;height:.1rem;background:#ebf1f2;"></div>
+        <div class="subContent address">
+          <h5>地点</h5>
+          <div class="flex-h">
+            <div class="flex-item">
+              <div class="img">
+                <router-link :to="{name: '', query: {}}">
+
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="flex-h">
       <div class="flex-item">
         <div>
-
+          <span>总计￥<em>109</em>.00</span>
+          <span>优惠券体验</span>
         </div>
       </div>
       <router-link :to="{name: '', query: {}}">去购买</router-link>
@@ -30,11 +60,17 @@
 export default {
   name: '',
   data () {
-    return {}
+    return {
+      showMoreCourse: false, // 显隐更多课程时间
+    }
   },
   computed: {},
-  created () {},
-  methods: {}
+  created () { },
+  methods: {
+    triggerCourseTime () { // 显隐更多课程时间
+      this.showMoreCourse = !this.showMoreCourse
+    },
+  }
 }
 </script>
 

src/module/user/majorProjectsDetail/page.scss

@@ -74,6 +74,87 @@
           }
         }
       }
+      .subContent{
+        h5{
+          width: 100%;
+          display: block;
+          line-height: .22rem;
+          font-size: .16rem;
+          text-indent: .26rem;
+          margin: .15rem auto 0;
+        }
+      }
+      .time{
+        &>span{
+          width: 100%;
+          display: block;
+          line-height: .22rem;
+          color: #666;
+          font-size: .11rem;
+          text-indent: .26rem;
+        }
+        .list{
+          &>div{
+            margin: 0 .26rem;
+            ul{
+              font-size: 0;
+              height: .44rem;
+              overflow: hidden;
+              &.show{
+                height: auto;
+              }
+              li{
+                width: 50%;
+                display: inline-block;
+                line-height: .22rem;
+                font-size: .11rem;
+                color: #666;
+                &:nth-child(2n){
+                  text-align: right;
+                }
+              }
+            }
+            .moreCourse{
+              width: 100%;
+              display: block;
+              text-align: center;
+              border-top: .01rem solid #eee;
+              line-height: .4rem;
+              color: #666;
+              font-size: .13rem;
+              margin-top: .05rem;
+              i{
+                line-height: .4rem;
+                color: #666;
+                font-size: .13rem;  
+              }
+            }
+          }
+        }
+      }
+      .address{
+        &>div{
+          &>div{
+            margin: 0 .26rem;
+            border-bottom: .01rem solid #eee;
+            padding: .2rem 0;
+            .img{
+              width: 2.4rem;
+              position: relative;
+              overflow: hidden;
+              a{
+                width: 100%;
+                display: block;
+                padding-bottom: 62.5%;
+                background: #eee;
+                border-radius: .06rem;
+                position: relative;
+                overflow: hidden;
+              }
+            }
+          }
+        }
+      }
     }
   }
   &>div.flex-h{
@@ -82,6 +163,28 @@
     position: relative;
     z-index: 100;
     box-shadow: 0 0 .2rem .02rem rgba(0,0,0,.05);
+    div{
+      vertical-align: middle;
+      span{
+        width: 100%;
+        display: inline-block;
+        text-align: center;
+        text-decoration: line-through;
+        font-size: .11rem;
+        em{
+          font-size: .18rem;
+        }
+        &:only-child{
+          line-height: .4rem;
+          text-decoration: none;
+        }
+        &+span{
+          color: #fc6243;
+          font-size: .11rem;
+          text-decoration: none;
+        }
+      }
+    }
     &>a{
       line-height: .4rem;
       padding: 0 .6rem;