首页样式调整

application/wap/view/first/index/index.html

@@ -137,7 +137,7 @@
         </a>
     </div>
     <!-- 新闻 -->
-    <div v-if="newsList.length" class="news">
+    <!-- <div v-if="newsList.length" class="news">
         <div class="pictrue"><img src="{__WAP_PATH}zsff/images/news.png" /></div>
         <div id="swiper2" class="swiper-container">
             <div class="swiper-wrapper">
@@ -146,23 +146,34 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div> -->
     <!--活动区域-->
-    <div class="activity acea-row row-between" v-if="activity.length || activityOne.id">
-        <a class="left" :href="activityOne.wap_link">
-            <div class="title line1" v-text="activityOne.title"></div>
-            <div class="info line1" v-text="activityOne.info"></div>
-            <div class="pictrue"><img :src="activityOne.pic"></div>
-        </a>
-        <div class="right" v-if="activity.length">
-            <a class="item acea-row row-middle" v-for="item in activity" :href="item.wap_link">
-                <div class="text">
-                    <div class="title line1" v-text="item.title"></div>
-                    <div class="info line1" v-text="item.info">考研强助力</div>
-                </div>
-                <div class="pictrue"><img :src="item.pic"></div>
+    <div  class="interest">
+        <div class="public_title acea-row row-between-wrapper">
+            <div class="name">
+                <div class="title-circular" style="background-color:yellow;"></div>
+                <div class="title-text">推荐课程</div>
+            </div>
+            <a class="link" href="{:url('wap/index/unified_list', ['recommend_id'=>26])}">
+                查看更多<span class="iconfont iconxiangyou"></span>
             </a>
         </div>
+        <div class="activity acea-row row-between" v-if="activity.length || activityOne.id">
+            <a class="left" :href="activityOne.wap_link">
+                <div class="title line1" v-text="activityOne.title"></div>
+                <div class="info line1" v-text="activityOne.info"></div>
+                <div class="pictrue"><img :src="activityOne.pic"></div>
+            </a>
+            <div class="right" v-if="activity.length">
+                <a class="item acea-row row-middle" v-for="item in activity" :href="item.wap_link">
+                    <div class="text">
+                        <div class="title line1" v-text="item.title"></div>
+                        <div class="info line1" v-text="item.info">考研强助力</div>
+                    </div>
+                    <div class="pictrue"><img :src="item.pic"></div>
+                </a>
+            </div>
+        </div>
     </div>
     <!-- 自定义排版 -->
     <template v-if="recommend.length">
@@ -177,8 +188,11 @@
             <recommend-question v-else-if="item.type === 12" :key="item.id" :obj="item"></recommend-question>
             <!-- 拼团课程 -->
             <div v-else-if="item.type === 8 && item.list.length" :key="item.id" class="group-section">
-                <div class="title">
-                    <div class="name">{{ item.title }}</div>
+                <div class="title public_title">
+                    <div class="name">
+                        <div class="title-circular"></div>
+                        <div class="title-text">{{ item.title }}</div>
+                    </div>
                     <div class="wrap">
                         <div class="img-wrap">
                             <img class="img" v-for="itm in groupWork.avatar" :src="itm.avatar">
@@ -207,8 +221,11 @@
             </div>
             <!-- 新闻资讯 -->
             <div v-else-if="item.type === 1 && item.list.length" :key="item.id" class="news-section">
-                <div class="title">
-                    <div>{{ item.title }}</div>
+                <div class="title public_title">
+                    <div class="name">
+                        <div class="title-circular"></div>
+                        <div class="title-text">{{ item.title }}</div>
+                    </div>
                     <a class="link" href="{:url('article/news_list')}">
                         查看更多<span class="iconfont iconxiangyou"></span>
                     </a>
@@ -233,7 +250,10 @@
             <!--直播-->
             <div v-else-if="item.type === 5 && item.list.length" :key="item.id" class="broadcast">
                 <div class="public_title acea-row row-between-wrapper">
-                    <div class="name">{{ item.title }}</div>
+                    <div class="name">
+                        <div class="title-circular"></div>
+                        <div class="title-text">{{ item.title }}</div>
+                    </div>
                 </div>
                 <div id="swiper4" class="swiper-container swiperScroll">
                     <div class="swiper-wrapper">
@@ -285,7 +305,10 @@
             <!-- 线下活动 -->
             <div v-else-if="item.type === 7 && item.list.length" :key="item.id" class="essential activity-offline">
                 <div class="public_title acea-row row-between-wrapper">
-                    <div class="name">{{ item.title }}</div>
+                    <div class="name">
+                        <div class="title-circular"></div>
+                        <div class="title-text">{{ item.title }}</div>
+                    </div>
                     <a class="more acea-row row-middle" :href="getActivityHref()">查看更多<span class="iconfont iconxiangyou"></span></a>
                 </div>
                 <div class="list">
@@ -309,7 +332,10 @@
                 <!-- 左右切换 -->
                 <div v-if="item.typesetting == 4 && item.list.length" :key="item.id" class="curriculum">
                     <div class="public_title acea-row row-between-wrapper">
-                        <div class="name" v-text="item.title"></div>
+                        <div class="name">
+                            <div class="title-circular"></div>
+                            <div class="title-text" v-text="item.title"></div>
+                        </div>
                         <a class="more acea-row row-middle" v-if="item.type !== 10" :href="getNavHref(item)">查看更多<span class="iconfont iconxiangyou"></span></a>
                     </div>
                     <div class="swiper-container" :class="'swiper-course-'+index" :data-index="index">
@@ -347,7 +373,10 @@
                 <!-- 大图 -->
                 <div v-if="item.typesetting == 1 && item.list.length" :key="item.id" class="essential">
                     <div class="public_title acea-row row-between-wrapper">
-                        <div class="name" v-text="item.title"></div>
+                        <div class="name" >
+                            <div class="title-circular"></div>
+                            <div class="title-text" v-text="item.title"></div>
+                        </div>
                         <a v-if="item.type !== 10" :href="getNavHref(item)" class="more acea-row row-middle">
                             查看更多<span class="iconfont iconxiangyou"></span>
                         </a>
@@ -382,39 +411,39 @@
                 <!-- 小图 -->
                 <div v-if="item.typesetting == 3 && item.list.length" :key="item.id" class="interest">
                     <div class="public_title acea-row row-between-wrapper">
-                        <div class="name" v-text="item.title"></div>
+                        <div class="name">
+                            <div class="title-circular"></div>
+                            <div class="title-text" v-text="item.title"></div>
+                        </div>
                         <a v-if="item.type !== 10" :href="getNavHref(item)" class="more acea-row row-middle">
                             查看更多<span class="iconfont iconxiangyou"></span>
                         </a>
                     </div>
                     <div class="public_list">
-                        <a v-for="val in item.list" :href="getDetails(item.type,val.link_id,val.is_light)" class="item acea-row">
-                            <div class="pictrue" :class="{ 'goods-picture': item.type === 4 }">
-                                <img :src="val.image">
-                                <div class="label">{{val.special_type_name}}</div>
-                            </div>
-                            <div class="text">
-                                <div class="title acea-row row-middle">
-                                    <div class="name line1" v-text="val.title"></div>
-                                </div>
-                                <div class="labelList" style="height:.4rem;line-height:.4rem;">
-                                    <span v-for="label in val.label" class="labelItem">{{label}}</span>
+                        <a v-for="val in item.list" :href="getDetails(item.type,val.link_id,val.is_light)" class="item">
+                            <div class="smail-pic">
+                                <div :class="{ 'goods-picture': item.type === 4 }" class="pictrue">
+                                    <img :src="val.image">
+                                    <div class="label">{{ val.special_type_name }}</div>
                                 </div>
-                                <div class="acea-row row-middle row-between" style="height:.45rem;" v-if="item.type==0">
-                                    <div>
-                                        <div class="free" v-if="val.pay_type == 0 || val.pay_type == 2">免费</div>
-                                        <div class="money" v-if="val.pay_type == 1 && val.is_pink == 0">￥<span>{{val.money}}</span></div>
-                                        <div class="money" v-if="val.pay_type == 1 && val.is_pink > 0">￥<span>{{val.pink_money}}</span></div>
+                                <div class="text">
+                                    <div class="title acea-row row-middle">
+                                        <div class="name line1" v-text="val.title"></div>
                                     </div>
-                                    <div class="total" v-if="val.special_type!=4 && !val.is_light">共{{ val.count }}节</div>
-                                </div>
-                                <div v-if="item.type === 4" class="acea-row row-middle row-between" style="height:.45rem;">
-                                    <div>
-                                        <div class="money" v-if="val.money > 0">￥<span>{{val.money}}</span></div>
-                                        <div class="free" v-else>免费</div>
+                                    <div v-if="item.type === 10" class="learn"><span>{{ val.browse_count }}</span><span>次学习</span></div>
+                                    <div class="info acea-row row-between-wrapper">
+                                        <div class="labelList">
+                                            <span class="labelItem" v-for="label in val.label">{{ label }}</span>
+                                        </div>
+                                        <div>
+                                            <div class="free" v-if="val.pay_type == 0 || val.pay_type == 2">免费</div>
+                                            <div class="money" v-if="val.pay_type == 1 && val.is_pink == 0">￥<span>{{ val.money }}</span></div>
+                                            <div class="money" v-if="val.pay_type == 1 && val.is_pink > 0">￥<span>{{ val.pink_money }}</span></div>
+                                            <!-- <div class="total" v-if="val.special_type!=4 && item.type==0 && !val.is_light">共{{ val.count }}节</div> -->
+                                            <div class="total" v-else-if="item.type==4">已售{{ val.count }}件</div>
+                                        </div>
                                     </div>
                                 </div>
-                                <div v-if="item.type === 10" class="learn"><span>{{ val.browse_count }}</span><span>次学习</span></div>
                             </div>
                         </a>
                     </div>
@@ -422,7 +451,10 @@
                 <!-- 宫图 -->
                 <div v-if="item.typesetting == 2 && item.list.length" :key="item.id" class="interest english">
                     <div class="public_title acea-row row-between-wrapper">
-                        <div class="name" v-text="item.title"></div>
+                        <div class="name">
+                            <div class="title-circular"></div>
+                            <div class="title-text" v-text="item.title"></div>
+                        </div>
                         <a v-if="item.type !== 10" :href="getNavHref(item)" class="more acea-row row-middle">
                             查看更多<span class="iconfont iconxiangyou"></span>
                         </a>

public/wap/first/zsff/css/style.css

@@ -4922,10 +4922,10 @@ input:-webkit-autofill:focus {
 
 .indexNew .nav .item {
     -webkit-box-flex: 0;
-    -ms-flex: 0 0 20%;
-    -webkit-flex: 0 0 20%;
+    -ms-flex: 0 0 25%;
+    -webkit-flex: 0 0 25%;
     -moz-box-flex: 0;
-    flex: 0 0 20%;
+    flex: 0 0 25%;
     min-width: 0;
     padding-top: .14rem;
     padding-bottom: .14rem;
@@ -4953,8 +4953,7 @@ input:-webkit-autofill:focus {
 }
 
 .indexNew .activity {
-    padding: .24rem .2rem;
-    margin-top: .14rem;
+    padding: 0rem .2rem;
     background-color: #fff
 }
 
@@ -5048,6 +5047,20 @@ input:-webkit-autofill:focus {
     font-size: .22rem;
     color: #999
 }
+.public_title .name .title-circular{
+    width: 20px;
+    height: 20px;
+    left:-8px;
+    border-radius: 50%;
+    position: absolute;
+    z-index: 0;
+    background-color: #D2E3FF;
+}
+
+.public_title .name .title-text{
+    position: relative;
+    z-index: 2;
+}
 
 .public_title .more .iconfont {
     margin-left: .09rem;
@@ -5265,9 +5278,16 @@ input:-webkit-autofill:focus {
 }
 
 .public_list {
-    padding: 0 .2rem .3rem
+    padding: 0 .2rem .3rem;
+    overflow: hidden;
+}
+.public_list .smail-pic{
+    -ms-flex: 0 0 50%;
+    -webkit-flex: 0 0 50%;
+    -moz-box-flex: 0;
+    flex: 0 0 50%;
+    float: left;
 }
-
 .essential .list {
     padding-bottom: .24rem
 }
@@ -5277,7 +5297,7 @@ input:-webkit-autofill:focus {
 }
 
 .public_list .item .pictrue {
-    width: 3.45rem;
+    width: 98%;
     height: 1.92rem;
     border-radius: .1rem;
     position: relative
@@ -5317,7 +5337,7 @@ input:-webkit-autofill:focus {
 
 .public_list .item .text .num {
     font-size: .22rem;
-    color: #999
+    color: #999;
 }
 
 .public_list .item .text {
@@ -5328,7 +5348,8 @@ input:-webkit-autofill:focus {
     -moz-box-flex: 1;
     flex: 1;
     min-width: 0;
-    margin-left: .2rem
+    margin-left: .2rem;
+    height: 1.5rem;
 }
 
 .public_list .item .text>div:last-child {
@@ -5343,6 +5364,7 @@ input:-webkit-autofill:focus {
 }
 
 .public_list .item .text .title {
+    margin-top: 0.2rem;
     font-size: .28rem;
     line-height: .4rem;
     color: #333
@@ -5594,6 +5616,7 @@ input:-webkit-autofill:focus {
     color: #999
 }
 
+
 .indexNew .essential .list .item .text .info .money .yen {
     font-size: .24rem
 }