周立森 5 years ago
parent
commit
9cc01999ec
7 changed files with 86 additions and 67 deletions
  1. 3
    6
      src/App.vue
  2. 6
    6
      src/components/Share.vue
  3. 2
    2
      src/views/About.vue
  4. 7
    5
      src/views/Case.vue
  5. 1
    1
      src/views/Details.vue
  6. 58
    39
      src/views/Dynamic.vue
  7. 9
    8
      src/views/Home.vue

+ 3
- 6
src/App.vue View File

127
       direction: 'rtl',
127
       direction: 'rtl',
128
     }
128
     }
129
   },
129
   },
130
-  components: {
131
 
130
 
132
-  },
133
   methods: {
131
   methods: {
134
     enter1 () {
132
     enter1 () {
135
 
133
 
167
     }
165
     }
168
 
166
 
169
   },
167
   },
170
-  created () {
171
-  },
168
+ 
172
   mounted () {
169
   mounted () {
173
     window.addEventListener('scroll', () => {
170
     window.addEventListener('scroll', () => {
174
       this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 200
171
       this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 200
265
     padding: 0;
262
     padding: 0;
266
   }
263
   }
267
   .logo {
264
   .logo {
268
-    margin-top: 16.5px;
265
+    margin-top: 15px;
269
     margin-left: 20px;
266
     margin-left: 20px;
270
     width: 150px;
267
     width: 150px;
271
-    height: 25px;
268
+    height: 30px;
272
     background-size: 100% 100% !important;
269
     background-size: 100% 100% !important;
273
     background: url("./assets/logo1.png");
270
     background: url("./assets/logo1.png");
274
   }
271
   }

+ 6
- 6
src/components/Share.vue View File

19
     return {
19
     return {
20
       defautlOpt: {
20
       defautlOpt: {
21
         url: '', // 网址,默认使用 window.location.href
21
         url: '', // 网址,默认使用 window.location.href
22
-        source: '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />
22
+        // source: '', // 来源(QQ空间会用到), 默认读取head标签:<meta name="site" content="http://overtrue" />
23
         title: '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />
23
         title: '', // 标题,默认读取 document.title 或者 <meta name="title" content="share.js" />
24
-        origin: '', // 分享 @ 相关 twitter 账号
25
-        description: '', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />
24
+        // origin: '', // 分享 @ 相关 twitter 账号
25
+        // description: '', // 描述, 默认读取head标签:<meta name="description" content="PHP弱类型的实现原理分析" />
26
         image: '', // 图片, 默认取网页中第一个img标签
26
         image: '', // 图片, 默认取网页中第一个img标签
27
         sites: ['weibo', 'wechat'], // 启用的站点
27
         sites: ['weibo', 'wechat'], // 启用的站点
28
         // disabled            : ['qzone', 'qq', 'douban', 'google', 'facebook', 'twitter'], // 禁用的站点
28
         // disabled            : ['qzone', 'qq', 'douban', 'google', 'facebook', 'twitter'], // 禁用的站点
51
         ...config,
51
         ...config,
52
       }
52
       }
53
 
53
 
54
-      window.console.log(options)
55
-
56
-      window.socialShare(this.$el, options)
54
+      if (this.$el && options.title) {
55
+        window.socialShare(this.$el, options)
56
+      }
57
     }
57
     }
58
   }
58
   }
59
 }
59
 }

+ 2
- 2
src/views/About.vue View File

278
   .about-1 {
278
   .about-1 {
279
     padding: 20px 30px;
279
     padding: 20px 30px;
280
     div {
280
     div {
281
-      .about-1-img {
282
-      }
281
+      // .about-1-img {
282
+      // }
283
       .caption {
283
       .caption {
284
         h2 {
284
         h2 {
285
           font-size: 1.2rem;
285
           font-size: 1.2rem;

+ 7
- 5
src/views/Case.vue View File

26
       <div>
26
       <div>
27
         <el-row style="text-align: center;">
27
         <el-row style="text-align: center;">
28
           <el-col :span="24">
28
           <el-col :span="24">
29
-            <button type="button" @click="addall()" class="btn-link" style="color:black;font-size: 24px;">全部案例</button>
29
+            <button type="button" @click="() => filterCase()"  class="btn-link" style="color:black;font-size: 24px;">全部案例</button>
30
           </el-col>
30
           </el-col>
31
           <el-col :span="24" v-for="cas in casetype" :key="cas.id"> 
31
           <el-col :span="24" v-for="cas in casetype" :key="cas.id"> 
32
             <!-- @click="() => filterCase(cas)" -->
32
             <!-- @click="() => filterCase(cas)" -->
42
     <div class="contanier center-block dyn-main">
42
     <div class="contanier center-block dyn-main">
43
       <div class="row">
43
       <div class="row">
44
         <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
44
         <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
45
-          <router-link :to="{ name: 'details', params: { id: item.id }}">
45
+          <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
46
             <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
46
             <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
47
           </router-link>
47
           </router-link>
48
         </div>
48
         </div>
161
 
161
 
162
 <style scoped>
162
 <style scoped>
163
 
163
 
164
-
165
-.btn-link{
166
-  outline: none;
164
+.routelink{
167
   text-decoration: none;
165
   text-decoration: none;
168
 }
166
 }
169
 
167
 
284
     padding: 10px;
282
     padding: 10px;
285
   }
283
   }
286
 }
284
 }
285
+.btn-link{
286
+  outline: none;
287
+  text-decoration: none
288
+}
287
 </style>
289
 </style>

+ 1
- 1
src/views/Details.vue View File

102
       return {
102
       return {
103
         url: window.location.href,
103
         url: window.location.href,
104
         title: this.current.caseTitle,
104
         title: this.current.caseTitle,
105
-        description: this.current.caseSummary
105
+        description: this.current.caseSummary,
106
       }
106
       }
107
     },
107
     },
108
     cover () {
108
     cover () {

+ 58
- 39
src/views/Dynamic.vue View File

1
-
2
 <template>
1
 <template>
3
   <div class="dynamic">
2
   <div class="dynamic">
4
     <div>
3
     <div>
23
         <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部动态</el-button>
22
         <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部动态</el-button>
24
       </div>
23
       </div>
25
     </div>
24
     </div>
26
-    <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" :show-close="true" size="80%">
25
+    <el-drawer :visible.sync="drawer" :direction="direction" :show-close="true" size="80%">
27
       <div>
26
       <div>
28
-        <el-row>
27
+        <el-row  style="text-align: center;">
29
           <el-col :span="24">
28
           <el-col :span="24">
30
-            <button type="button" class="btn-link" style="color:black;font-size: 24px;">全部动态</button>
29
+            <button type="button" class="btn-link"  @click="() => filterCase()" style="color:black;font-size: 24px;">全部动态</button>
31
           </el-col>
30
           </el-col>
32
-          <el-col :span="24" v-for="cas in casetype" :key="cas" @click="classification(cas.typeName)">
33
-            <button type="button" class="btn-link" style="color:black;font-size: 24px">{{cas.typeName}}</button>
31
+          <el-col :span="24" v-for="cas in casetype" :key="cas.id" >
32
+            <button type="button" class="btn-link" @click="() => filterCase(cas)" style="color:black;font-size: 24px">{{cas.typeName}}</button>
34
           </el-col>
33
           </el-col>
35
           <el-col :span="24">
34
           <el-col :span="24">
36
-            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;position:fixed;bottom:100px;">返回</button>
35
+            <button type="button" class="btn btn-default" @click="drawer = flase" style="color:black;font-size: 24px;padding:auto 40px; margin-top:30px">返回</button>
37
           </el-col>
36
           </el-col>
38
         </el-row>
37
         </el-row>
39
       </div>
38
       </div>
42
     <div class="contanier center-block dyn-main">
41
     <div class="contanier center-block dyn-main">
43
       <div class="row">
42
       <div class="row">
44
         <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
43
         <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
45
-          <router-link :to="{ name: 'details', params: { id: item.id }}">
44
+          <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
46
             <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
45
             <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
47
           </router-link>
46
           </router-link>
48
         </div>
47
         </div>
79
       },
78
       },
80
 
79
 
81
       allLoaded: false,//数据全部加载
80
       allLoaded: false,//数据全部加载
81
+      drawer: false,
82
+      navdrawer: false,
83
+      direction: 'rtl',
82
     }
84
     }
83
   },
85
   },
84
   components: {
86
   components: {
161
 
163
 
162
 <style scoped>
164
 <style scoped>
163
 
165
 
164
-.btn-link{
165
-  outline: none;
166
+.routelink{
166
   text-decoration: none;
167
   text-decoration: none;
167
 }
168
 }
168
 
169
 
170
+.casecard{
171
+ 
172
+  width: 100%;
173
+
174
+  padding-bottom: 100%;
175
+  background-size: 100% 100% !important;
176
+  /* position: relative; */
177
+
178
+  margin: 0;
179
+
180
+}
181
+
169
 .border-bottom {
182
 .border-bottom {
170
   /* display: none; */
183
   /* display: none; */
171
   border-bottom: 1px solid #bfbfbf;
184
   border-bottom: 1px solid #bfbfbf;
172
-  margin-top: 10px !important;
173
-}
174
-.btn1 {
175
-  font-size: 24px !important;
176
-  color: black !important;
177
-  border: none !important;
185
+      margin-top: 10px !important;
178
 }
186
 }
179
-.btn1:hover {
180
-  color: red !important;
181
-  text-decoration: none;
187
+ .btn1 {
188
+    font-size: 24px !important;
189
+    color: black !important;
190
+    border: none !important;
191
+  }
192
+  .btn1:hover {
193
+    color: red !important;
194
+    text-decoration: none;
195
+  }
196
+.mobbtn{
197
+color: #e03723;
198
+   
199
+  padding:12px 40px;
200
+
201
+    border-radius: 0px;
202
+
203
+    background-color: rgb(252, 151, 252);
204
+    border: 2px solid #bfbfbf;
205
+  
182
 }
206
 }
207
+
183
 .text-left {
208
 .text-left {
184
   color: #000;
209
   color: #000;
185
 }
210
 }
194
 }
219
 }
195
 
220
 
196
 @media (max-width: 992px) {
221
 @media (max-width: 992px) {
197
-  .dynamic {
222
+  .case{
198
     margin-top: 58px;
223
     margin-top: 58px;
199
   }
224
   }
200
   .comtype {
225
   .comtype {
206
   }
231
   }
207
 }
232
 }
208
 .row {
233
 .row {
209
-  margin: 0;
210
-}
234
+    margin: 0;
235
+  }
211
 .marginTP {
236
 .marginTP {
212
   margin-top: 3rem;
237
   margin-top: 3rem;
213
 }
238
 }
221
     /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
246
     /* flex-flow: <flex-direction> <flex-wrap>; */ /*简写*/
222
     justify-content: center;
247
     justify-content: center;
223
   }
248
   }
224
-  .dynamic {
225
-    margin-top: 116px;
226
-    margin-bottom: -116px;
227
-    padding-bottom: 116px;
228
-    background-color: #fafafa;
229
-  }
230
-
249
+  .case {
250
+  margin-top: 116px;
251
+  margin-bottom: -116px;
252
+  padding-bottom: 116px; 
253
+  background-color: #fafafa;
254
+}
255
+  
231
   .mobtype {
256
   .mobtype {
232
     display: none;
257
     display: none;
233
   }
258
   }
234
 
259
 
260
+  
235
   .btn {
261
   .btn {
236
     font-size: 24px;
262
     font-size: 24px;
237
     margin-top: 88px;
263
     margin-top: 88px;
258
     padding: 10px;
284
     padding: 10px;
259
   }
285
   }
260
 }
286
 }
261
-
262
-.mobbtn {
263
-  color: #e03723;
264
-
265
-  padding: 12px 40px;
266
-
267
-  border-radius: 0px;
268
-
269
-  background-color: rgb(252, 151, 252);
270
-  border: 2px solid #bfbfbf;
287
+.btn-link{
288
+  outline: none;
289
+  text-decoration: none
271
 }
290
 }
272
 </style>
291
 </style>

+ 9
- 8
src/views/Home.vue View File

161
         <div class="contanier st top-news">
161
         <div class="contanier st top-news">
162
           <div class="row">
162
           <div class="row">
163
             <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
163
             <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
164
-              <router-link :to="{ name: 'details', params: { id: item.id }}">
164
+              <router-link :to="{ name: 'details', params: { id: item.id }}" class="routelink">
165
                 <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"></div>
165
                 <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"></div>
166
                 <h3 class="text-left" style>{{item.caseTitle}}</h3>
166
                 <h3 class="text-left" style>{{item.caseTitle}}</h3>
167
               </router-link>
167
               </router-link>
176
 </template>
176
 </template>
177
 
177
 
178
 <script>
178
 <script>
179
-// @ is an alias to /src
180
-//  import Swiper from "swiper";
181
 
179
 
182
-// const times = x => '*'.repeat(x - 1).split('*')
183
 
180
 
184
 import { scrollIntoView } from 'scroll-js'
181
 import { scrollIntoView } from 'scroll-js'
185
 import Wheelplanting from "@/components/Wheelplanting.vue";
182
 import Wheelplanting from "@/components/Wheelplanting.vue";
220
 
217
 
221
 
218
 
222
   },
219
   },
223
-  watch () {
224
-
225
-  },
220
+ 
226
   methods: {
221
   methods: {
227
     arrow () {
222
     arrow () {
228
 
223
 
274
 </script>
269
 </script>
275
 
270
 
276
 <style scoped>
271
 <style scoped>
272
+
273
+
277
 @media (max-width: 992px) {
274
 @media (max-width: 992px) {
278
   .business-text {
275
   .business-text {
279
     display: none;
276
     display: none;
557
 
554
 
558
 
555
 
559
 <style lang="less" scoped>
556
 <style lang="less" scoped>
557
+.routelink{
558
+  text-decoration: none;
559
+}
560
 @media (max-width: 992px) {
560
 @media (max-width: 992px) {
561
   .navbar {
561
   .navbar {
562
     display: none;
562
     display: none;
575
     display: none;
575
     display: none;
576
   }
576
   }
577
   .navbar {
577
   .navbar {
578
+    height: 116px;
578
     z-index: 70;
579
     z-index: 70;
579
     padding: 30px 0;
580
     padding: 30px 0;
580
     background-color: transparent;
581
     background-color: transparent;
591
     .nav {
592
     .nav {
592
       font-size: 2.6rem;
593
       font-size: 2.6rem;
593
       li {
594
       li {
594
-        margin-left: 2.1vw;
595
+        margin-left: 2vw;
595
         a {
596
         a {
596
           color: #fff;
597
           color: #fff;
597
 
598