Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
panhui
/
zhi-rong-web
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Pārlūkot izejas kodu

0616

panhui 4 gadi atpakaļ
vecāks
acc25bd487
revīzija
404bf5bf57
8 mainītis faili ar 431 papildinājumiem un 6 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 1 1
      public/index.html
  2. 90 0
      src/components/home/HeaderBtn.vue
  3. 0 0
      src/components/home/HotProduct.vue
  4. 186 0
      src/components/home/Resources.vue
  5. 64 0
      src/components/home/ServiceBox.vue
  6. 0 1
      src/plugins/http.js
  7. 6 0
      src/styles/common.less
  8. 84 4
      src/views/Home.vue

+ 1 - 1
public/index.html
Parādīt failu 

@@ -5,7 +5,7 @@
 
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 
-        <link rel="stylesheet" href="//at.alicdn.com/t/font_2605369_6g8rzn44f0e.css">
 
+        <link rel="stylesheet" href="https://at.alicdn.com/t/font_2605369_4izhsra29jf.css">
 
         <title>智戎管理平台</title>
 
     </head>
 
     <body>

+ 90 - 0
src/components/home/HeaderBtn.vue
Parādīt failu 

@@ -0,0 +1,90 @@
 
+<template>
 
+    <div class="header-btn" :class="{ active: isChoose }" @click="choose">
 
+        <div class="icon">
 
+            <i :class="'iconfont ' + icon"></i>
 
+        </div>
 
+        <div class="text">{{ name }}</div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    name: 'HeaderBtn',
 
+    props: {
 
+        icon: {
 
+            type: String,
 
+            default: ''
 
+        },
 
+        name: {
 
+            type: String,
 
+            default: ''
 
+        },
 
+        isChoose: {
 
+            type: Boolean,
 
+            default: false
 
+        }
 
+    },
 
+    methods: {
 
+        choose() {
 
+            this.$emit('choose');
 
+        }
 
+    }
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.header-btn {
 
+    .flex-col();
 
+    align-items: center;
 
+    cursor: pointer;
 
+
 
+    .icon {
 
+        width: 74px;
 
+        height: 74px;
 
+        background: #ffffff;
 
+        border-radius: 45px;
 
+        border: 1px solid #dcdfe6;
 
+        text-align: center;
 
+        .iconfont {
 
+            line-height: 74px;
 
+            font-size: 40px;
 
+            color: #878d99;
 
+        }
 
+    }
 
+
 
+    .text {
 
+        font-size: 14px;
 
+        font-weight: 400;
 
+        color: #565b66;
 
+        line-height: 26px;
 
+        margin-top: 16px;
 
+    }
 
+    &:hover {
 
+        .icon {
 
+            background-color: @prim;
 
+            border-color: @prim;
 
+            .iconfont {
 
+                color: #fff;
 
+            }
 
+        }
 
+
 
+        .text {
 
+            color: #0f264d;
 
+        }
 
+    }
 
+
 
+    &.active {
 
+        .icon {
 
+            background-color: @prim;
 
+            border-color: @prim;
 
+            .iconfont {
 
+                color: #fff;
 
+            }
 
+        }
 
+
 
+        .text {
 
+            color: #0f264d;
 
+        }
 
+    }
 
+}
 
+</style>

+ 0 - 0
src/components/HotProduct.vue → src/components/home/HotProduct.vue
Parādīt failu


+ 186 - 0
src/components/home/Resources.vue
Parādīt failu 

@@ -0,0 +1,186 @@
 
+<template>
 
+    <div class="resources">
 
+        <div class="resources-header">
 
+            <header-btn
 
+                :isChoose="chooseResource === index"
 
+                v-for="(item, index) in resources"
 
+                :key="index"
 
+                :icon="item.icon"
 
+                :name="item.name"
 
+                @choose="chooseResource = index"
 
+            ></header-btn>
 
+
 
+            <div class="resources-tag" :style="{ left: `${167 * chooseResource + 96}px` }"></div>
 
+        </div>
 
+
 
+        <div class="resource-box">
 
+            <div class="news-content">
 
+                <div class="top">
 
+                    <div class="title">政策</div>
 
+                    <el-link :underline="false" class="more">
 
+                        更多<i class="el-icon-view el-icon-arrow-right"></i>
 
+                    </el-link>
 
+                </div>
 
+                <div class="news-list">
 
+                    <router-link v-for="i in 20" :key="i" :to="{ name: 'newsDetail' }" class="news-link">
 
+                        <span class="text1">习近平在江西考察并主持召开推动中部地区崛起工作座谈会</span>
 
+                        <span class="text2">05.23</span>
 
+                    </router-link>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+import HeaderBtn from './HeaderBtn.vue';
 
+export default {
 
+    components: { HeaderBtn },
 
+    data() {
 
+        return {
 
+            chooseResource: 0,
 
+            resources: [
 
+                {
 
+                    icon: 'iconfont-imt_fuwu_icon_01_pre',
 
+                    name: '政策'
 
+                },
 
+                {
 
+                    icon: 'iconfont-imt_fuwu_icon_02',
 
+                    name: '法律'
 
+                },
 
+                {
 
+                    icon: 'iconfont-imt_fuwu_icon_04_pre',
 
+                    name: '知产'
 
+                },
 
+                {
 
+                    icon: 'iconfont-imt_fuwu_icon_03',
 
+                    name: '技术'
 
+                },
 
+                {
 
+                    icon: 'iconfont-imt_fuwu_icon_042',
 
+                    name: '产品'
 
+                },
 
+                {
 
+                    icon: 'iconfont-imt_fuwu_icon_04',
 
+                    name: '企业'
 
+                },
 
+                {
 
+                    icon: 'iconfont-imt_fuwu_icon_041',
 
+                    name: '专家'
 
+                }
 
+            ]
 
+        };
 
+    }
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.resources-header {
 
+    .flex();
 
+    padding: 40px 20px 24px;
 
+    justify-content: space-between;
 
+    .header-btn {
 
+        padding: 0 40px;
 
+    }
 
+
 
+    position: relative;
 
+    &::after {
 
+        content: '';
 
+        position: absolute;
 
+        left: 0;
 
+        right: 0;
 
+        bottom: 0;
 
+        background-color: #0f264d;
 
+        height: 1px;
 
+        z-index: 1;
 
+    }
 
+    .resources-tag {
 
+        position: absolute;
 
+        bottom: 0px;
 
+        width: 10px;
 
+        height: 6px;
 
+        background-color: #fff;
 
+        z-index: 2;
 
+        transition: left ease-in-out 0.3s;
 
+        &::before {
 
+            content: '';
 
+            background-color: #0f264d;
 
+            width: 8px;
 
+            left: -2px;
 
+            height: 1px;
 
+            position: absolute;
 
+            bottom: 0;
 
+            transform-origin: 0px 0px;
 
+            transform: rotate(-30deg);
 
+        }
 
+        &::after {
 
+            content: '';
 
+            background-color: #0f264d;
 
+            width: 8px;
 
+            right: -2px;
 
+            height: 1px;
 
+            position: absolute;
 
+            bottom: 0;
 
+            transform-origin: 8px 0px;
 
+            transform: rotate(30deg);
 
+        }
 
+    }
 
+}
 
+.resource-box {
 
+    padding: 30px 0 100px;
 
+}
 
+.news-content {
 
+    padding: 10px 30px;
 
+    height: 367px;
 
+    width: 1020px;
 
+    box-shadow: 0px 2px 10px 0px rgba(25, 25, 25, 0.1);
 
+    box-sizing: border-box;
 
+    .flex-col();
 
+    .top {
 
+        .flex();
 
+        .title {
 
+            color: @prim;
 
+            font-size: 16px;
 
+            font-weight: bold;
 
+        }
 
+        padding: 20px 0;
 
+        justify-content: space-between;
 
+        border-bottom: 1px solid @bg;
 
+    }
 
+}
 
+
 
+.news-list {
 
+    flex-grow: 1;
 
+    overflow: auto;
 
+    padding: 25px 12px 15px;
 
+    .news-link {
 
+        text-decoration: none;
 
+        .flex();
 
+        font-size: 14px;
 
+        line-height: 20px;
 
+
 
+        .text1 {
 
+            color: #000;
 
+            flex-grow: 1;
 
+        }
 
+
 
+        .text2 {
 
+            color: @info;
 
+        }
 
+
 
+        &:hover {
 
+            .text1 {
 
+                color: @prim;
 
+            }
 
+
 
+            .text2 {
 
+                color: fade(@prim, 60%);
 
+            }
 
+        }
 
+    }
 
+
 
+    .news-link + .news-link {
 
+        margin-top: 25px;
 
+    }
 
+}
 
+</style>

+ 64 - 0
src/components/home/ServiceBox.vue
Parādīt failu 

@@ -0,0 +1,64 @@
 
+<template>
 
+    <div class="service-box">
 
+        <div
 
+            class="img"
 
+            style="
 
+                background-image: url(https://bpic.588ku.com//back_origin_min_pic/21/05/10/0a49bb4d236d05aa40d3bd251547b15b.jpg);
 
+            "
 
+        ></div>
 
+
 
+        <div class="content">
 
+            <i class="iconfont iconfont-imt_youshi_icon_02"></i>
 
+
 
+            <div class="text">实务代理<br />丰富的行业交流、政企交流活动</div>
 
+        </div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.service-box {
 
+    position: relative;
 
+    overflow: hidden;
 
+    .img {
 
+        width: 100%;
 
+        height: 0;
 
+        padding-top: 160%;
 
+        .bg();
 
+        z-index: 1;
 
+        transition: transform ease-in-out 0.3s;
 
+    }
 
+    cursor: pointer;
 
+
 
+    &:hover {
 
+        .img {
 
+            transform: scale(1.1);
 
+        }
 
+    }
 
+}
 
+
 
+.content {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    right: 0;
 
+    bottom: 0;
 
+    z-index: 2;
 
+    background-color: rgba(0, 0, 0, 0.1);
 
+    .flex-col();
 
+    color: #fff;
 
+    justify-content: center;
 
+    .iconfont {
 
+        align-self: center;
 
+        font-size: 72px;
 
+    }
 
+
 
+    .text {
 
+        padding: 18% 11%;
 
+        text-align: center;
 
+    }
 
+}
 
+</style>

+ 0 - 1
src/plugins/http.js
Parādīt failu 

@@ -21,7 +21,6 @@ const axiosInstance = axios.create({
 
 axiosInstance.interceptors.request.use(
 
     function (config) {
 
         config.headers = config.headers || {};
 
-        let token = window.localStorage.getItem('imtPCtoken');
 
         if (token) {
 
             config.headers['Authorization'] = 'Bearer ' + token;
 
         }

+ 6 - 0
src/styles/common.less
Parādīt failu 

@@ -40,6 +40,12 @@
 
     overflow: hidden;
 
 }
 
 
+.bg(){
 
+    background-position: center center;
 
+    background-size: cover;
 
+    background-repeat: no-repeat;
 
+}
 
+
 
 @keyframes iconAnimate {
 
     from {
 
         -webkit-transform: scale(1);

+ 84 - 4
src/views/Home.vue
Parādīt failu 

@@ -52,7 +52,7 @@
 
             </divider-title>
 
 
             <div class="hot">
 
-                <div class="hto-btn">
 
+                <div class="hot-btn">
 
                     <div class="btn-item">
 
                         <el-button icon="el-icon-edit" type="primary">供给发布</el-button>
 
                         <el-button icon="el-icon-edit" type="primary">需求发布</el-button>
 
@@ -77,15 +77,52 @@
 
                 <template #prim>服务</template>
 
                 <template #sub>Convergence service</template>
 
             </divider-title>
 
+
 
+            <div class="service">
 
+                <div class="service-btn">
 
+                    <div class="btn-item">
 
+                        <el-button type="primary">
 
+                            <i class="iconfont iconfont-nav_icon_xiaoxi1"></i>
 
+                            咨询客服
 
+                        </el-button>
 
+                        <el-button icon="el-icon-s-comment" type="primary">提交留言</el-button>
 
+                    </div>
 
+                </div>
 
+
 
+                <div class="service-list">
 
+                    <service-box v-for="i in 5" :key="i"></service-box>
 
+                </div>
 
+            </div>
 
+
 
+            <divider-title>
 
+                <template #prim>资源</template>
 
+                <template #sub>Convergence resources</template>
 
+            </divider-title>
 
+
 
+            <resources></resources>
 
+
 
+            <div class="link">
 
+                <div class="name">客户</div>
 
+                <div class="link-list">
 
+                    <router-link v-for="i in 15" :key="i" :to="{ name: 'newsDetail' }" class="link-img">
 
+                        <img
 
+                            src="https://bpic.588ku.com//back_origin_min_pic/21/05/26/2c2dc3d931033956e2b12919abca29a6.jpg"
 
+                            alt=""
 
+                        />
 
+                    </router-link>
 
+                </div>
 
+            </div>
 
         </div>
 
     </div>
 
 </template>
 
 
 <script>
 
 import DividerTitle from '../components/DividerTitle.vue';
 
-import HotProduct from '../components/HotProduct.vue';
 
+import HotProduct from '../components/home/HotProduct.vue';
 
+import Resources from '../components/home/Resources.vue';
 
+import ServiceBox from '../components/home/ServiceBox.vue';
 
 export default {
 
-    components: { DividerTitle, HotProduct },
 
+    components: { DividerTitle, HotProduct, ServiceBox, Resources },
 
     name: 'Home',
 
     data() {
 
         return {
 
@@ -225,10 +262,12 @@ export default {
 
 .hot {
 
     padding: 0 0 50px;
 
 }
 
-.hto-btn {
 
+.hot-btn {
 
     .flex();
 
     justify-content: space-between;
 
+}
 
 
+.btn-item {
 
     .el-button {
 
         border-radius: 0;
 
         font-size: 12px;
 
@@ -244,6 +283,11 @@ export default {
 
     }
 
 }
 
 
+.service-btn {
 
+    .flex();
 
+    justify-content: flex-end;
 
+}
 
+
 
 .products {
 
     .flex();
 
     flex-wrap: wrap;
 
@@ -263,4 +307,40 @@ export default {
 
     height: 370px;
 
     background-color: @bg;
 
 }
 
+
 
+.service-list {
 
+    padding: 50px 0 100px;
 
+    .flex();
 
+    justify-content: space-between;
 
+    .service-box {
 
+        width: 17%;
 
+    }
 
+}
 
+
 
+.link {
 
+    .name {
 
+        font-size: 16px;
 
+        font-weight: bold;
 
+        color: #000000;
 
+        line-height: 22px;
 
+        padding: 15px 0;
 
+    }
 
+
 
+    .link-list {
 
+        .flex();
 
+        overflow: auto;
 
+        width: 100%;
 
+        padding: 15px 0;
 
+        .link-img {
 
+            img {
 
+                height: 30px;
 
+                width: auto;
 
+                display: block;
 
+            }
 
+        }
 
+        .link-img + .link-img {
 
+            margin-left: 15px;
 
+        }
 
+    }
 
+}
 
 </style>