解决方案

src/router/module/common.js

@@ -18,6 +18,21 @@ export default [
         meta: { title: '解决方案', is_filter: true },
         component: () => import('@/views/solve/index.vue'),
       },
+      {
+        path: '/brand',
+        meta: { title: '品牌理念', is_filter: true },
+        component: () => import('@/views/brand/index.vue'),
+      },
+      {
+        path: '/news',
+        meta: { title: '新闻资讯', is_filter: true },
+        component: () => import('@/views/news/index.vue'),
+      },
+      {
+        path: '/contact',
+        meta: { title: '联系我们', is_filter: true },
+        component: () => import('@/views/contact/index.vue'),
+      },
     ],
   },
 ];

src/views/brand/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__zoomInDown"> 解决方案 </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/contact/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__zoomInDown"> 解决方案 </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/homeIndex.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="homeIndex">
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__rotateIn">
+      <el-col :span="24" class="main animate__animated animate__zoomInDown">
         <el-col :span="24" class="zero one">
           <el-col :span="16" class="one_1">
             <el-carousel height="500px">
@@ -76,7 +76,7 @@ export default {
   data: function () {
     return {
       // 轮播图
-      bannerList: [{ url: require('@a/photo_1.jpg') }, { url: require('@a/photo_2.jpg') }, { url: require('@a/photo_3.jpg') }],
+      bannerList: [{ url: require('@a/photo_1.jpg') }],
       // 新闻
       newsList: [
         {

src/views/news/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__zoomInDown"> 解决方案 </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/solve/index.vue

@@ -1,7 +1,57 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight"> 解决方案 </el-col>
+      <el-col :span="24" class="main animate__animated animate__zoomInDown">
+        <el-col :span="24" class="zero one">
+          <el-col :span="16" class="one_1">
+            <el-carousel height="500px">
+              <el-carousel-item v-for="(item, index) in bannerList" :key="index">
+                <el-image class="image" :src="item.url"></el-image>
+              </el-carousel-item>
+            </el-carousel>
+          </el-col>
+          <el-col :span="8" class="one_2">
+            <el-col :span="24" class="newsList" v-for="(item, index) in newsList" :key="index">
+              <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
+              <el-col :span="24" class="date">{{ item.date }}</el-col>
+              <el-col :span="24" class="brief">{{ item.brief }}</el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="zero two">
+          <el-col :span="24" class="common_1">
+            <span>解决方案</span>
+            <span></span>
+            <span></span>
+          </el-col>
+          <el-col :span="24" class="two_2">
+            <el-col :span="8" class="twoList" v-for="(item, index) in twoList" :key="index">
+              <el-image class="image" :src="item.url"></el-image>
+              <el-col :span="24" class="other">
+                <el-col :span="24" class="title textOver">
+                  <span>{{ item.title }}</span>
+                </el-col>
+                <el-col :span="24" class="brief">
+                  {{ item.brief }}
+                </el-col>
+              </el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="zero thr">
+          <el-col :span="24" class="common_1">
+            <span>案例展示</span>
+            <span></span>
+            <span></span>
+          </el-col>
+          <el-col :span="24" class="thr_2">
+            <el-col :span="8" class="thrList" v-for="(item, index) in thrList" :key="index">
+              <el-image class="image" :src="item.url"></el-image>
+              <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -13,7 +63,78 @@ export default {
   props: {},
   components: {},
   data: function () {
-    return {};
+    return {
+      // 轮播图
+      bannerList: [{ url: require('@a/photo_2.jpg') }],
+      // 新闻
+      newsList: [
+        {
+          title: '物联网应用开发实时操作系统Zephyr',
+          date: '2023-02-02',
+          brief: '作为网购整个流程中的重要一环，快递的作用可想而知，作为网购整个流程中的重要一环，快递的作用可想而知，',
+        },
+        {
+          title: '物联网应用开发实时操作系统Zephyr',
+          date: '2023-02-02',
+          brief: '作为网购整个流程中的重要一环，快递的作用可想而知，作为网购整个流程中的重要一环，快递的作用可想而知，',
+        },
+        {
+          title: '物联网应用开发实时操作系统Zephyr',
+          date: '2023-02-02',
+          brief: '作为网购整个流程中的重要一环，快递的作用可想而知，作为网购整个流程中的重要一环，快递的作用可想而知，',
+        },
+        {
+          title: '物联网应用开发实时操作系统Zephyr',
+          date: '2023-02-02',
+          brief: '作为网购整个流程中的重要一环，快递的作用可想而知，作为网购整个流程中的重要一环，快递的作用可想而知，',
+        },
+      ],
+      // 第二部分
+      twoList: [
+        {
+          url: require('@a/solve_1.jpg'),
+          title: '微商-微信二维码',
+          brief: '微柜-微信二维码柜，一种基于微信的新物联网智能柜，它可以通过微信扫一扫来控制柜子的开、关。',
+        },
+        {
+          url: require('@a/solve_2.jpg'),
+          title: '视频直播APP软件',
+          brief: '视频直播APP软件方案成熟，经过专业视频团队打造，已有成功案例。可应用于视频门户、视频社交、在线教育、企业视频等。',
+        },
+        {
+          url: require('@a/solve_3.jpg'),
+          title: '智能快递柜系统',
+          brief: '提供的智能快递柜控制系统软硬整体解决方案，方案成熟可靠，已运行在上千柜体中！可定制开发适用于如：早餐柜、快递柜等。',
+        },
+      ],
+      // 第三部分
+      thrList: [
+        {
+          url: require('@a/solve_4.jpg'),
+          title: '软件开发品牌Modulor 视觉识别系统',
+        },
+        {
+          url: require('@a/solve_5.jpg'),
+          title: '软件开发品牌Modulor 视觉识别系统',
+        },
+        {
+          url: require('@a/solve_6.jpg'),
+          title: '软件开发品牌Modulor 视觉识别系统',
+        },
+        {
+          url: require('@a/solve_7.jpg'),
+          title: '软件开发品牌Modulor 视觉识别系统',
+        },
+        {
+          url: require('@a/solve_8.jpg'),
+          title: '软件开发品牌Modulor 视觉识别系统',
+        },
+        {
+          url: require('@a/solve_9.jpg'),
+          title: '软件开发品牌Modulor 视觉识别系统',
+        },
+      ],
+    };
   },
   created() {},
   methods: {},
@@ -33,4 +154,140 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .zero {
+    margin: 0 0 2vw 0;
+    .common_1 {
+      margin: 0 0 20px 0;
+      span:nth-child(1) {
+        color: #ffc001;
+        font-size: 18px;
+      }
+      span:nth-child(2) {
+        display: inline-block;
+        width: 8px;
+        height: 10px;
+        background-color: #ffc001;
+        margin: 0 10px;
+      }
+      span:nth-child(3) {
+        display: inline-block;
+        width: 91%;
+        height: 10px;
+        background-color: #f1f1f1;
+      }
+    }
+  }
+  .one {
+    .one_1 {
+      .image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .one_2 {
+      padding: 0 10px;
+      .newsList {
+        margin: 0 0 20px 0;
+        padding: 0 0 20px 0;
+        border-bottom: 1px dashed #353535;
+        .title {
+          font-size: 20px;
+          margin: 0 0 5px 0;
+          font-weight: bold;
+          font-family: cursive;
+        }
+        .date {
+          font-size: 14px;
+          margin: 0 0 5px 0;
+        }
+        .brief {
+          font-size: 14px;
+          color: #7e7e7e;
+          line-height: 1.5;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 2;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .newsList:last-child {
+        border-bottom: none;
+        margin: 0;
+        padding: 0;
+      }
+      .newsList:hover {
+        cursor: pointer;
+        .title {
+          color: #ffc001;
+        }
+        .date {
+          color: #ffc001;
+        }
+      }
+    }
+  }
+  .two {
+    .two_2 {
+      .twoList {
+        width: 29%;
+        height: 420px;
+        overflow: hidden;
+        margin: 0 70px 0 0;
+        border: 1px solid #dbdbdb;
+        .image {
+          width: 100%;
+        }
+        .other {
+          padding: 0 10px;
+          .title {
+            padding: 1.5vw 0;
+            margin: 0 0 5px 0;
+            text-align: center;
+            border-bottom: 1px solid #dbdbdb;
+            font-size: 22px;
+            color: #747474;
+          }
+          .brief {
+            padding: 0 10px;
+            font-size: 14px;
+            line-height: 1.5;
+            color: #747474;
+            letter-spacing: 2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 5;
+            word-break: break-all;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+          }
+        }
+      }
+      .twoList:last-child {
+        margin: 0;
+      }
+    }
+  }
+  .thr {
+    .thr_2 {
+      .thrList {
+        padding: 20px;
+        .image {
+          width: 100%;
+          height: 200px;
+          overflow: hidden;
+        }
+        .title {
+          text-align: center;
+          padding: 5px 0;
+          font-size: 14px;
+          color: #747474;
+        }
+      }
+    }
+  }
+}
+</style>