Главная Обзор Помощь
Регистрация Вход
panhui
/
zhi-rong-web
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

首页

panhui 4 лет назад
Родитель
0e7ae660e0
Сommit
ca90ae9a0a
13 измененных файлов с 422 добавлено и 27 удалено
Разделённый вид Показать статистику Diff
  1. 1 0
      public/index.html
  2. 9 1
      src/App.vue
  3. 77 0
      src/components/DividerTitle.vue
  4. 57 0
      src/components/HotProduct.vue
  5. 3 3
      src/components/NavMenu.vue
  6. 6 2
      src/element-variables.scss
  7. 4 4
      src/main.js
  8. 8 0
      src/router/index.js
  9. 4 3
      src/styles/common.less
  10. 237 2
      src/views/Home.vue
  11. 0 1
      src/views/Index.vue
  12. 9 0
      src/views/NewsDetail.vue
  13. 7 11
      vue.config.js

+ 1 - 0
public/index.html
Просмотреть файл 

@@ -5,6 +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">
 
         <title>智戎管理平台</title>
 
     </head>
 
     <body>

+ 9 - 1
src/App.vue
Просмотреть файл 

@@ -1,5 +1,5 @@
 
 <template>
 
-    <router-view class="appContainer" />
 
+    <router-view style="min-width: 1300px;" />
 
 </template>
 
 
 <script>
 
@@ -22,4 +22,12 @@ export default {
 
     margin: 0;
 
     padding: 0;
 
 }
 
+
 
+.center-content {
 
+    .center-content();
 
+}
 
+
 
+.iconfont {
 
+    font-size: 24px;
 
+}
 
 </style>

+ 77 - 0
src/components/DividerTitle.vue
Просмотреть файл 

@@ -0,0 +1,77 @@
 
+<template>
 
+    <div ref="title" class="page-title" @click="goTo">
 
+        <div class="title">
 
+            <span><slot>IP融合</slot></span>
 
+            <span><slot name="prim"></slot></span>
 
+        </div>
 
+
 
+        <div class="sub">
 
+            <slot name="sub">Convergence service</slot>
 
+        </div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    name: 'DividerTitle',
 
+    methods: {
 
+        goTo() {
 
+            window.scrollTo({
 
+                top: this.$refs.title.offsetTop - 100,
 
+                behavior: 'smooth'
 
+            });
 
+        }
 
+    }
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.title {
 
+    font-size: 22px;
 
+    font-weight: 600;
 
+    color: @warn;
 
+    line-height: 32px;
 
+
 
+    span {
 
+        &:last-child {
 
+            color: @prim;
 
+        }
 
+    }
 
+}
 
+
 
+.page-title {
 
+    margin: auto;
 
+    padding: 100px 50px 40px;
 
+    .flex-col();
 
+    align-items: center;
 
+    cursor: pointer;
 
+
 
+    &:hover {
 
+        .sub {
 
+            &::before,
 
+            &::after {
 
+                width: 45px;
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+.sub {
 
+    font-size: 12px;
 
+    font-weight: 900;
 
+    color: @info;
 
+    line-height: 17px;
 
+    .flex();
 
+    margin-top: 3px;
 
+
 
+    &::before,
 
+    &::after {
 
+        content: '';
 
+        width: 30px;
 
+        height: 1px;
 
+        background: @info;
 
+        margin: 0 10px;
 
+        transition: width ease-in-out 0.3s;
 
+    }
 
+}
 
+</style>

+ 57 - 0
src/components/HotProduct.vue
Просмотреть файл 

@@ -0,0 +1,57 @@
 
+<template>
 
+    <div class="hot-product">
 
+        <div
 
+            class="img"
 
+            style="
 
+                background-image: url(https://img-qn.51miz.com/Photo/2017/05/03/21/P240300_c527399b08d2fc5c0c46c6764cca1e0f.jpg);
 
+            "
 
+        ></div>
 
+
 
+        <div class="text">
 
+            需求侧
 
+        </div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    name: 'HotProduct'
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.hot-product {
 
+    position: relative;
 
+    overflow: hidden;
 
+    .img {
 
+        height: 0;
 
+        padding-top: 48%;
 
+        background-size: cover;
 
+        background-position: center center;
 
+        transition: transform ease-in-out 0.3s;
 
+    }
 
+
 
+    .text {
 
+        position: absolute;
 
+        left: 0;
 
+        right: 0;
 
+        bottom: 0;
 
+        top: 0;
 
+        font-size: 38px;
 
+        color: #ffffff;
 
+        line-height: 49px;
 
+        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
 
+        background-color: rgba(0, 0, 0, 0.2);
 
+        z-index: 2;
 
+        .flex();
 
+        justify-content: center;
 
+    }
 
+    cursor: pointer;
 
+
 
+    &:hover {
 
+        .img {
 
+            transform: scale(1.1);
 
+        }
 
+    }
 
+}
 
+</style>

+ 3 - 3
src/components/NavMenu.vue
Просмотреть файл 

@@ -61,16 +61,16 @@ export default {
 
             &:focus {
 
                 border-width: 0;
 
                 color: #fff;
 
-                background-color: @warn;
 
+                background-color: @prim;
 
             }
 
             &:hover,
 
             &:active {
 
-                background-color: fade(@warn, 60%);
 
+                background-color: fade(@prim, 60%);
 
                 color: #fff;
 
             }
 
         }
 
     }
 
-    background-color: @prim;
 
+    background-color: @warn;
 
     position: absolute;
 
     top: 0;
 
     left: 0;

+ 6 - 2
src/element-variables.scss
Просмотреть файл 

@@ -4,8 +4,12 @@ found in element-ui/packages/theme-chalk/src/common/var.scss.
 
 For example, to overwrite the theme color:
 
 */
 
 
-$--color-primary: #00684f;
 
-$--color-warning: #ff8700;
 
+$--color-warning: #00684f;
 
+$--color-primary: #ff8700;
 
+$--color-info: #939599;
 
+$--link-default-font-color: #939599;
 
+$--link-font-size: 13px;
 
+$--link-font-weight: normal;
 
 
 /* icon font path, required */
 
 $--font-path: '~element-ui/lib/theme-chalk/fonts';

+ 4 - 4
src/main.js
Просмотреть файл 

@@ -14,10 +14,10 @@ Vue.config.productionTip = false;
 
 const observerMap = new Map();
 
 Vue.directive('change', {
 
     // 当被绑定的元素插入到 DOM 中时……
 
-    bind(el) {
 
-        const config = { attributes: true };
 
-        const callback = function (mutationsList) {
 
-            console.log(mutationsList);
 
+    bind(el, binding) {
 
+        const config = { attributes: true, subtree: true };
 
+        const callback = function () {
 
+            binding.value();
 
         };
 
 
         var _observer = new MutationObserver(callback);

+ 8 - 0
src/router/index.js
Просмотреть файл 

@@ -19,6 +19,14 @@ const routes = [
 
                 meta: {
 
                     title: '首页'
 
                 }
 
+            },
 
+            {
 
+                path: '/newsDetail',
 
+                name: 'newsDetail',
 
+                component: () => import('../views/NewsDetail.vue'),
 
+                meta: {
 
+                    title: '新闻详情'
 
+                }
 
             }
 
         ]
 
     }

+ 4 - 3
src/styles/common.less
Просмотреть файл 

@@ -1,7 +1,8 @@
 
-@prim: #00684F;
 
+@warn: #00684f;
 
 @success: #07c160;
 
-@danger: #ff6c00;
 
-@warn: #FF8700;
 
+@danger: #ea2d2d;
 
+@prim: #ff8700;
 
+@info: #939599;
 
 @text0: #181818;
 
 @text1: #323233;
 
 @text2: #606266;

+ 237 - 2
src/views/Home.vue
Просмотреть файл 

@@ -1,17 +1,252 @@
 
 <template>
 
     <div class="home">
 
-        <el-button type="primary" size="default">255</el-button>
 
+        <div class="center-content">
 
+            <div class="news">
 
+                <div class="carousel news-item" @mouseover="autoplay = false" @mouseout="autoplay = true">
 
+                    <el-carousel
 
+                        :autoplay="autoplay"
 
+                        ref="carousel"
 
+                        height="360px"
 
+                        arrow="never"
 
+                        trigger="hover"
 
+                        @change="changeCarousl"
 
+                    >
 
+                        <el-carousel-item v-for="item in 4" :key="item">
 
+                            <h3 class="small">{{ item }}</h3>
 
+                        </el-carousel-item>
 
+                    </el-carousel>
 
+
 
+                    <div class="indicators">
 
+                        <span
 
+                            v-for="(item, index) in 4"
 
+                            @mouseover="changeIndex(index)"
 
+                            :key="item"
 
+                            :class="{ active: activeIndex === index }"
 
+                            >{{ item }}</span
 
+                        >
 
+                    </div>
 
+                </div>
 
+
 
+                <div class="tab news-item">
 
+                    <el-link :underline="false" class="more">
 
+                        更多<i class="el-icon-view el-icon-arrow-right"></i>
 
+                    </el-link>
 
+                    <el-tabs v-model="activeName">
 
+                        <el-tab-pane label="行业动态" name="first"></el-tab-pane>
 
+                        <el-tab-pane label="新闻资讯" name="second"></el-tab-pane>
 
+                        <el-tab-pane label="通知公告" name="third"></el-tab-pane>
 
+                    </el-tabs>
 
+
 
+                    <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>
 
+
 
+            <divider-title>
 
+                <template #prim>运营</template>
 
+                <template #sub>Hot products</template>
 
+            </divider-title>
 
+
 
+            <div class="hot">
 
+                <div class="hto-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>
 
+                    </div>
 
+                    <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="products">
 
+                    <hot-product v-for="i in 6" :key="i"></hot-product>
 
+                </div>
 
+            </div>
 
+        </div>
 
     </div>
 
 </template>
 
 
 <script>
 
+import DividerTitle from '../components/DividerTitle.vue';
 
+import HotProduct from '../components/HotProduct.vue';
 
 export default {
 
-    name: 'Home'
 
+    components: { DividerTitle, HotProduct },
 
+    name: 'Home',
 
+    data() {
 
+        return {
 
+            activeIndex: 0,
 
+            autoplay: true,
 
+            activeName: 'first'
 
+        };
 
+    },
 
+    methods: {
 
+        changeCarousl() {
 
+            this.activeIndex = this.$refs.carousel.activeIndex;
 
+        },
 
+        changeIndex(index) {
 
+            this.$refs.carousel.setActiveItem(index);
 
+        }
 
+    }
 
 };
 
 </script>
 
 
 <style lang="less" scoped>
 
 .home {
 
     background-color: #fff;
 
+    padding: 80px 0;
 
+}
 
+
 
+.news {
 
+    .flex();
 
+    justify-content: space-between;
 
+    .carousel {
 
+        position: relative;
 
+    }
 
+
 
+    .el-carousel__item {
 
+        background-color: #99a9bf;
 
+    }
 
+
 
+    /deep/ .el-carousel__indicators {
 
+        display: none;
 
+    }
 
+
 
+    .indicators {
 
+        position: absolute;
 
+        right: 12px;
 
+        bottom: 12px;
 
+        z-index: 2;
 
+        span {
 
+            width: 22px;
 
+            height: 22px;
 
+            background: rgba(0, 0, 0, 0.46);
 
+            text-align: center;
 
+            font-size: 14px;
 
+            color: #ffffff;
 
+            line-height: 22px;
 
+            display: inline-block;
 
+            cursor: pointer;
 
+
 
+            &.active {
 
+                background-color: @danger;
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+.news-item {
 
+    width: calc(50% - 10px);
 
+}
 
+
 
+.tab {
 
+    height: 360px;
 
+    background: #ffffff;
 
+    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
 
+    padding: 16px 16px 10px;
 
+    box-sizing: border-box;
 
+    position: relative;
 
+    .flex-col();
 
+    overflow: hidden;
 
+
 
+    /deep/.el-tabs__nav-wrap {
 
+        &::after {
 
+            height: 1px;
 
+            background-color: @bg;
 
+        }
 
+
 
+        .el-tabs__active-bar {
 
+            height: 1px;
 
+        }
 
+        .el-tabs__item {
 
+            font-size: 16px;
 
+        }
 
+    }
 
+
 
+    /deep/.el-tabs__header {
 
+        margin: 0 0 0;
 
+    }
 
+
 
+    .more {
 
+        position: absolute;
 
+        right: 16px;
 
+        top: 26px;
 
+        z-index: 20;
 
+    }
 
+}
 
+.news-list {
 
+    flex-grow: 1;
 
+    overflow: auto;
 
+    padding: 25px 5px 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;
 
+    }
 
+}
 
+
 
+.hto-btn {
 
+    .flex();
 
+    justify-content: space-between;
 
+
 
+    .el-button {
 
+        border-radius: 0;
 
+        font-size: 12px;
 
+
 
+        /deep/ i {
 
+            font-size: 22px;
 
+            line-height: 42px;
 
+            display: inline-block;
 
+            vertical-align: middle;
 
+        }
 
+        line-height: 42px;
 
+        padding: 0 20px;
 
+    }
 
+}
 
+
 
+.products {
 
+    .flex();
 
+    flex-wrap: wrap;
 
+    justify-content: space-between;
 
+    padding: 50px 0;
 
+
 
+    .hot-product {
 
+        width: 31%;
 
+
 
+        &:nth-child(n + 4) {
 
+            margin-top: 30px;
 
+        }
 
+    }
 
 }
 
 </style>

+ 0 - 1
src/views/Index.vue
Просмотреть файл 

@@ -37,7 +37,6 @@ export default {
 
 }
 
 
 .main {
 
-    height: 1000px;
 
     padding: 0;
 
     .flex-col();
 
 }

+ 9 - 0
src/views/NewsDetail.vue
Просмотреть файл 

@@ -0,0 +1,9 @@
 
+<template>
 
+    <div></div>
 
+</template>
 
+
 
+<script>
 
+export default {};
 
+</script>
 
+
 
+<style></style>

+ 7 - 11
vue.config.js
Просмотреть файл 

@@ -1,15 +1,10 @@
 
 const path = require('path');
 
 module.exports = {
 
-    publicPath:
 
-        process.env.NODE_ENV === 'production'
 
-            ? 'https://cdn.imttech.cn/index/'
 
-            : process.env.NODE_ENV === 'test'
 
-            ? '/index'
 
-            : '/',
 
-    devServer: {
 
-        port: 8081,
 
-        disableHostCheck: true
 
-    },
 
+    devServer:
 
+        {
 
+            port: 8081,
 
+            disableHostCheck: true
 
+        },
 
     pluginOptions: {
 
         'style-resources-loader': {
 
             preProcessor: 'less',
 
@@ -21,5 +16,6 @@ module.exports = {
 
             config.output.filename('[name].[hash].js').end();
 
         }
 
     },
 
-    transpileDependencies: ['ssr-window', 'dom7', 'vuex']
 
+    transpileDependencies: ['ssr-window', 'dom7', 'vuex'],
 
+    runtimeCompiler: true
 
 };