SpaceOfCheng
/
wechat
Obserwuj 3
Gwiazdka 0
Forkuj 0
Kod Problemy 3 Pull Requests 0 Wydania 1 Aktywność
Przeglądaj źródła

xcx

许成详 6 lat temu
rodzic
fc36e09d5f
commit
02741165cb
5 zmienionych plików z 1263 dodań i 1151 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 1166
    1149
      package-lock.json
  2. 2
    0
      package.json
  3. 45
    2
      src/module/user/mainPage/indexPage/index.vue
  4. 49
    0
      src/module/user/mainPage/indexPage/page.scss
  5. 1
    0
      src/module/user/user.html

+ 1166
- 1149
package-lock.json
Plik diff jest za duży
Wyświetl plik


+ 2
- 0
package.json Wyświetl plik 

@@ -11,8 +11,10 @@
11 11 
   "dependencies": {
12 12 
     "node-sass": "^4.9.3",
13 13 
     "sass-loader": "^7.1.0",
14 
+    "swiper": "^4.3.5",
14 15 
     "vant": "^1.1.16",
15 16 
     "vue": "^2.0.1",
17 
+    "vue-awesome-swiper": "^3.1.3",
16 18 
     "vue-router": "^3.0.1",
17 19 
     "vuex": "^3.0.1"
18 20 
   },

+ 45
- 2
src/module/user/mainPage/indexPage/index.vue Wyświetl plik 

@@ -2,6 +2,12 @@
2 2 
   <div class="mainPage">
3 3 
     <div class="topBanner">
4 4 
       <!-- <img src="" class="centerLabel cover" alt=""> -->
5 
+      <swiper :options="swiperOption" ref="mySwiper">
6 
+        <swiper-slide class="swiper-slide" v-for="(item,index) in 5" :key="index">
7 
+          {{index}}
8 
+        </swiper-slide>
9 
+        <div class="swiper-pagination"  slot="pagination"></div>
10 
+      </swiper>
5 11 
     </div>
6 12 
     <div class="pageTitle flex-h">
7 13 
       <h5 class="flex-item">
 
@@ -19,7 +25,20 @@
19 25 
       </nav>
20 26 
     </div>
21 27 
     <div class="MsgBanner">
22 
-
28 
+      <div class="flex-h">
29 
+        <i class="iconfont icon-xiaoxi"></i>
30 
+        <span>最新消息：</span>
31 
+        <div class="flex-item">
32 
+          <div>
33 
+            <swiper :options="swiperOptionMsg" ref="mySwiperMsg">
34 
+              <swiper-slide class="swiper-slide" v-for="(item,index) in 5" :key="index">
35 
+                <router-link :to="{name:'',query:{}}">这是一条消息</router-link>
36 
+              </swiper-slide>
37 
+              <div class="swiper-pagination"  slot="pagination"></div>
38 
+            </swiper>
39 
+          </div>
40 
+        </div>
41 
+      </div>
23 42 
     </div>
24 43 
     <div class="pageTitle flex-h">
25 44 
       <h5 class="flex-item">
 
@@ -51,11 +70,28 @@
51 70
52 71 
 <script>
53 72 
 import newsItem from '../../../../components/newsItem/index'
73 
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
74 
+import 'swiper/dist/css/swiper.css'
54 75
55 76 
 export default {
56 77 
   name: '',
57 78 
   data () {
58 79 
     return {
80 
+      swiperOption: {
81 
+          observer:true,
82 
+          loop : true,
83 
+          autoplay: {
84 
+            disableOnInteraction: false,
85 
+          }
86 
+      },
87 
+      swiperOptionMsg: {
88 
+          observer:true,
89 
+          direction : 'vertical',
90 
+          loop : true,
91 
+          autoplay: {
92 
+            disableOnInteraction: false,
93 
+          }
94 
+      },
59 95 
       newsList: [{ // 资讯列表
60 96 
         title:'我是标题我是标题我是标题我是标题我是标题我是标题',
61 97 
         time:'2018年5月25日',
 
@@ -85,10 +121,17 @@ export default {
85 121 
     }
86 122 
   },
87 123 
   computed: {
88 
-
124 
+    MySwiper() {
125 
+      return this.$refs.mySwiper.swiper
126 
+    },
127 
+    MySwiperMsg() {
128 
+      return this.$refs.MySwiperMsg.swiper
129 
+    },
89 130 
   },
90 131 
   components: {
91 132 
     newsItem,
133 
+    swiper,
134 
+    swiperSlide,
92 135 
   },
93 136 
   created () {
94 137

+ 49
- 0
src/module/user/mainPage/indexPage/page.scss Wyświetl plik 

@@ -14,6 +14,13 @@
14 14 
     overflow: hidden;
15 15 
     padding-bottom: 54%;
16 16 
     background: #eee;
17 
+    &>div{
18 
+      width: 100%;
19 
+      position: absolute;
20 
+      left: 0;
21 
+      bottom: 0;
22 
+      top: 0;
23 
+    }
17 24 
   }
18 25 
   .pageTitle{
19 26 
     margin: .18rem auto 0;
 
@@ -88,6 +95,48 @@
88 95 
     overflow: hidden;
89 96 
     background: #f8f8f8;
90 97 
     margin: .25rem auto 0;
98 
+    &>div{
99 
+      width: 100%;
100 
+      position: absolute;
101 
+      left: 0;
102 
+      top: 0;
103 
+      bottom: 0;
104 
+      align-items: center;
105 
+      &>i,
106 
+      &>span{
107 
+        color: #f05a3f;
108 
+        font-size: .12rem;
109 
+        margin-left: .08rem;
110 
+      }
111 
+      &>i{
112 
+        font-size: .16rem;
113 
+        margin-left: .3rem;
114 
+      }
115 
+      &>div{
116 
+        margin-left: .1rem;
117 
+        height: 100%;
118 
+        margin-right: .2rem;
119 
+        &>div{
120 
+          width: 100%;
121 
+          height: 100%;
122 
+          position: relative;
123 
+          overflow: hidden;
124 
+          &>div{
125 
+            width: 100%;
126 
+            height: 100%;
127 
+            a{
128 
+              width: 100%;
129 
+              display: inline-block;
130 
+              overflow: hidden;
131 
+              white-space: nowrap;
132 
+              text-overflow: ellipsis;
133 
+              line-height: .44rem;
134 
+              color: #f05a3f;
135 
+            }
136 
+          }
137 
+        }
138 
+      }
139 
+    }
91 140 
   }
92 141 
   .projectList{
93 142 
     margin: .1rem .1rem 0;

+ 1
- 0
src/module/user/user.html Wyświetl plik 

@@ -3,6 +3,7 @@
3 3 
 <head>
4 4 
   <meta charset="utf-8">
5 5 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8" />
6 
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_c8w80pqou5c.css">
6 7 
   <title>城的空间</title>
7 8 
 </head>
8 9 
 <body>