homeslice config

README.md

@@ -23,7 +23,10 @@ For a detailed explanation on how things work, check out the [guide](http://vuej
 
 # Private cloud configuration
 
-- 修改主题色
-> /src/style/main.scss 中更改 `$--color-primary`
-- 
+- 主题色配置
+> /src/style/main.scss 中更改 `$--color-primary`，`$color-primary-background`
+- 文字配置
+- logo配置
+- 组件展示配置
+
 

build/webpack.base.conf.js

@@ -53,17 +53,6 @@ module.exports = {
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
       {
-        test: /\.s[ac]ss$/i,
-        use: [
-          // Creates `style` nodes from JS strings
-          'style-loader',
-          // Translates CSS into CommonJS
-          'css-loader',
-          // Compiles Sass to CSS
-          'sass-loader',
-        ],
-      },
-      {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
         loader: 'url-loader',
         options: {

src/App.vue

@@ -93,10 +93,4 @@ export default {
     margin: 0 auto;
     padding-bottom: 30px;
   }
-  .home-slice {
-    width: 100%;
-    height: 170px;
-    background-image: url("assets/image/slice.png");
-    background-size: 100% 100%
-  }
 </style>

src/components/commons/HomeSlice.vue

@@ -1,114 +1,159 @@
 <template>
   <div class="home-slice">
-<!--    <el-row style="padding-top: 40px" v-loading="loading" element-loading-text="权限检查中...">-->
     <el-row style="padding-top: 40px">
-      <el-col :span="14">
-        <div class="slice-wrapper" style="padding-left: 20%">
-          <div class="slice-title"><img src="../../assets/img/homeslice1.png" alt="slice1"></div>
-          <div class="slice-info">1分钟带你玩转众测服务平台</div>
-          <div class="slice-btn" @click="goToCreateProject" style="cursor: pointer">立即进入<img src="../../assets/img/home-btn1.png" style="margin-left: 5px"></div>
+      <div class="slice-wrapper">
+        <div class="slice-title">{{ title }}</div>
+        <div class="slice-info">
+          <span class="line"></span>
+          <span class="txt">{{ subtitle }}</span>
+          <span class="line"></span>
         </div>
-      </el-col>
-      <el-col :span="10">
-        <div class="slice-wrapper">
-          <div class="slice-title"><img src="../../assets/img/homeslice2.png" alt="slice2"></div>
-          <div class="slice-info">入住众测服务平台流程</div>
-          <div class="slice-btn" @click="goToCreateTask" style="cursor: pointer">立即进入<img src="../../assets/img/home-btn2.png" style="margin-left: 5px"></div>
+        <div>
+          <el-button class="crowd-btn publish-btn" @click="goToCreateProject">发布项目</el-button>
+          <el-button class="crowd-btn participate-btn" @click="goToCreateTask">参与众测</el-button>
         </div>
-      </el-col>
+      </div>
     </el-row>
   </div>
 </template>
 
 <script>
-  import Apis from '@/js/api'
-  import Http from '@/js/http'
-  import {storageGet} from '@/js/index.js'
-  import {notify} from "../../constants";
+import Apis from '@/js/api'
+import Http from '@/js/http'
+import {storageGet} from '@/js/index.js'
+import {notify} from "../../constants";
+import {title, subtitle} from '../../config/index'
 
-  export default {
-        name: 'HomeSlice',
-        data() {
-            return {
-                user: {},
-                isLogin: false,
-              loading:false
-            }
-        },
-        methods: {
-          showLoading() {
-            this.loading = true
-          },
-          hideLoading() {
-            this.loading = false
-          },
-            loadData(){
-                if (storageGet('user') != null) {
-                    this.isLogin = true;
-                    this.user = storageGet('user').userVO;
-                }
-            },
-            checkCreateProjectAuth() {
-                if (!this.isLogin) {
-                    console.log("请登录后访问");
-                    notify('warning', '请登录后访问');
-                }
-                else if(this.isLogin){
-                  this.showLoading();
-                    Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
-                        console.log(res)
-                      this.hideLoading()
-                        this.$router.push('/project/create');
-                    }).catch((error) => {
-                      this.hideLoading()
-                        notify('error', error.data)
-                    })
-                }
-            },
-            checkCreateTaskAuth() {
-                if (!this.isLogin) {
-                    console.log("请登录后访问");
-                    notify('warning', '请登录后访问');
-                }
-                else if(this.isLogin){
-                  this.showLoading();
-                    Http.get(Apis.USER.IS_AGENCY.replace('{userId}', this.user.id)).then((res) => {
-                        console.log(res)
-                      this.hideLoading()
-                        this.$router.push('/square');
-                    }).catch((error) => {
-                      this.hideLoading()
-                        notify('error', error.data)
-                    })
-
-                }
-            },
-            goToCreateProject(){
-              this.checkCreateProjectAuth();
-            },
-            goToCreateTask(){
-                this.checkCreateTaskAuth();
-            },
-        },
-        mounted() {
-            this.loadData();
-        }
+export default {
+  name: 'HomeSlice',
+  data() {
+    return {
+      user: {},
+      isLogin: false,
+      loading: false,
+      title,
+      subtitle
     }
-</script>
+  },
+  methods: {
+    showLoading() {
+      this.loading = true
+    },
+    hideLoading() {
+      this.loading = false
+    },
+    loadData() {
+      if (storageGet('user') != null) {
+        this.isLogin = true;
+        this.user = storageGet('user').userVO;
+      }
+    },
+    checkCreateProjectAuth() {
+      if (!this.isLogin) {
+        console.log("请登录后访问");
+        notify('warning', '请登录后访问');
+      } else if (this.isLogin) {
+        this.showLoading();
+        Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
+          console.log(res)
+          this.hideLoading()
+          this.$router.push('/project/create');
+        }).catch((error) => {
+          this.hideLoading()
+          notify('error', error.data)
+        })
+      }
+    },
+    checkCreateTaskAuth() {
+      if (!this.isLogin) {
+        console.log("请登录后访问");
+        notify('warning', '请登录后访问');
+      } else if (this.isLogin) {
+        this.showLoading();
+        Http.get(Apis.USER.IS_AGENCY.replace('{userId}', this.user.id)).then((res) => {
+          console.log(res)
+          this.hideLoading()
+          this.$router.push('/square');
+        }).catch((error) => {
+          this.hideLoading()
+          notify('error', error.data)
+        })
 
-<style scoped>
-  .slice-info {
-    font-size: 16px;
-    font-family: Source Han Sans CN;
-    color: rgba(243, 224, 10, 1);
+      }
+    },
+    goToCreateProject() {
+      this.checkCreateProjectAuth();
+    },
+    goToCreateTask() {
+      this.checkCreateTaskAuth();
+    },
+  },
+  mounted() {
+    this.loadData();
   }
+}
+</script>
 
-  .slice-btn {
-    display: flex;
-    margin-top: 5px;
-    line-height: 30px;
-    color: white;
-    font-weight: 400;
-  }
+<style scoped lang="scss">
+@import "../../style/main";
+.home-slice {
+  background-image: url("../../assets/image/slice.png");
+  text-align: center;
+}
+.slice-title {
+  font-size: 40px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  letter-spacing:10px;
+  color: $--color-title-color;
+}
+
+.slice-info {
+  font-size: 16px;
+  font-family: Source Han Sans CN;
+  color: $--color-publish-background;
+  letter-spacing: 8px;
+}
 
+.slice-btn {
+  display: flex;
+  margin-top: 5px;
+  line-height: 30px;
+  color: white;
+  font-weight: 400;
+}
+.slice-info {
+  height: 30px;
+  line-height: 30px;
+  font-size: 24px;
+  text-align: center;
+}
+.slice-info .line {
+  display: inline-block;
+  width: 150px;
+  border: 1px solid $--color-publish-background;
+}
+.slice-info .txt {
+  vertical-align: middle;
+  vertical-align: -20%;
+  margin: 0 20px;
+  font-size: 16px;
+  color: $--color-publish-background;
+  letter-spacing: 8px;
+}
+.crowd-btn {
+  border: none;
+  color: white;
+  margin: 20px;
+  cursor:pointer;
+  padding: 8px 10px !important;
+}
+.publish-btn {
+  background-color: $--color-publish-background;
+  margin-right: 100px;
+}
+.participate-btn {
+  background-color: $--color-participate-background;
+  margin-left: 100px;
+}
 </style>

src/config/index.js

@@ -1,2 +1,3 @@
-//配置主题色
-export const color_primary = '#B80000';
+//配置homeSlice展示的标题，副标题
+export const title = '信创产业 领引国产新未来';
+export const subtitle = '共/建/信/创/生/态/共/推/产/业/发/展';

src/pages/Homepage/TestMenu.vue

@@ -50,7 +50,7 @@
         .test-menu-item-img {
           width: 46px;
           height: 46px;
-          background: rgba(231, 239, 247, 1);
+          background: $--color-primary-background;
           border-radius: 50%;
           padding: 6px;
           display: block;

src/style/basic.scss

@@ -2,3 +2,9 @@
 $color-primary: #B80000;
 //配置浅色主题背景色
 $color-primary-background:#FDD2D2;
+//配置发布按钮背景色
+$color-publish-background:#FFE400;
+//配置参与按钮背景色
+$color-participate-background:#FF1800;
+//配置slice title文本颜色
+$color-title-color:#FFFFFF;