SpaceOfCheng
/
wechat
Watch 3
Star 0
Fork 0
Code Issues 3 Pull Requests 0 Releases 1 Activity
Browse Source

xcx

许成详 6 years ago
parent
fc36e09d5f
commit
02741165cb
5 changed files with 1263 additions and 1151 deletions
Unified View Show Diff Stats
  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
File diff suppressed because it is too large
View File


+ 2
- 0
package.json View File

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

+ 45
- 2
src/module/user/mainPage/indexPage/index.vue View File

2 
   <div class="mainPage">
 2 
   <div class="mainPage">
3 
     <div class="topBanner">
 3 
     <div class="topBanner">
4 
       <!-- <img src="" class="centerLabel cover" alt=""> -->
 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 
     </div>
 11 
     </div>
6 
     <div class="pageTitle flex-h">
 12 
     <div class="pageTitle flex-h">
7 
       <h5 class="flex-item">
 13 
       <h5 class="flex-item">
19 
       </nav>
 25 
       </nav>
20 
     </div>
 26 
     </div>
21 
     <div class="MsgBanner">
 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 
     </div>
 42 
     </div>
24 
     <div class="pageTitle flex-h">
 43 
     <div class="pageTitle flex-h">
25 
       <h5 class="flex-item">
 44 
       <h5 class="flex-item">
51
70
52 
 <script>
 71 
 <script>
53 
 import newsItem from '../../../../components/newsItem/index'
 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 
 export default {
 76 
 export default {
56 
   name: '',
 77 
   name: '',
57 
   data () {
 78 
   data () {
58 
     return {
 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 
       newsList: [{ // 资讯列表
 95 
       newsList: [{ // 资讯列表
60 
         title:'我是标题我是标题我是标题我是标题我是标题我是标题',
 96 
         title:'我是标题我是标题我是标题我是标题我是标题我是标题',
61 
         time:'2018年5月25日',
 97 
         time:'2018年5月25日',
85 
     }
 121 
     }
86 
   },
 122 
   },
87 
   computed: {
 123 
   computed: {
88 
-
124 
+    MySwiper() {
125 
+      return this.$refs.mySwiper.swiper
126 
+    },
127 
+    MySwiperMsg() {
128 
+      return this.$refs.MySwiperMsg.swiper
129 
+    },
89 
   },
 130 
   },
90 
   components: {
 131 
   components: {
91 
     newsItem,
 132 
     newsItem,
133 
+    swiper,
134 
+    swiperSlide,
92 
   },
 135 
   },
93 
   created () {
 136 
   created () {
94
137

+ 49
- 0
src/module/user/mainPage/indexPage/page.scss View File

14 
     overflow: hidden;
 14 
     overflow: hidden;
15 
     padding-bottom: 54%;
 15 
     padding-bottom: 54%;
16 
     background: #eee;
 16 
     background: #eee;
17 
+    &>div{
18 
+      width: 100%;
19 
+      position: absolute;
20 
+      left: 0;
21 
+      bottom: 0;
22 
+      top: 0;
23 
+    }
17 
   }
 24 
   }
18 
   .pageTitle{
 25 
   .pageTitle{
19 
     margin: .18rem auto 0;
 26 
     margin: .18rem auto 0;
88 
     overflow: hidden;
 95 
     overflow: hidden;
89 
     background: #f8f8f8;
 96 
     background: #f8f8f8;
90 
     margin: .25rem auto 0;
 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 
   .projectList{
 141 
   .projectList{
93 
     margin: .1rem .1rem 0;
 142 
     margin: .1rem .1rem 0;

+ 1
- 0
src/module/user/user.html View File

3 
 <head>
 3 
 <head>
4 
   <meta charset="utf-8">
 4 
   <meta charset="utf-8">
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" />
 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 
   <title>城的空间</title>
 7 
   <title>城的空间</title>
7 
 </head>
 8 
 </head>
8 
 <body>
 9 
 <body>