feat: GS1标准服务提供商案例页面【100%】

src/router/service.js

@@ -88,6 +88,13 @@ export const service = {
                         name: "我要查找GS1标准服务提供商",
                     },
                 },
+                {
+                    path: "Partners/CaseList",
+                    component: () => import("@/views/Service/Partners/caseList"),
+                    meta: {
+                        name: "GS1标准服务提供商案例",
+                    },
+                },
                 // 标准服务提供商 End
             ],
         },

src/views/Service/Partners/caseList.vue

+<template>
+  <div class="search-content n-service partners-case-list">
+    <div class="title">GS1标准服务提供商案例</div>
+    <div class="body" style="padding-top: 9px;position: relative;">
+      <div class="search row" style="margin: 15px 0;">
+        <div class="col-lg-4">
+          <el-select style="width: 100%" size="small" v-model="service" placeholder="请选择">
+            <el-option
+                v-for="item in serviceList"
+                :key="item.value"
+                :label="item.value"
+                :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="col-lg-4 text-left">
+          <el-button type="primary" size="small">搜索</el-button>
+        </div>
+
+        <ul class="main-list">
+          <!-- 注意！这里请后台开发的同学替换成循环输出 top 20 -->
+
+          <li><a target="_blank" href="/Service/Partners/Case?id=5">
+            宁波天益医疗GS1-UDI项目案例介绍-上海路歌信息技术有限公司</a></li>
+
+          <li><a target="_blank" href="/Service/Partners/Case?id=4">
+            北京爱康医疗GS1-UDI项目案例介绍-上海敖维计算机科技发展有限公司</a></li>
+
+          <li><a target="_blank" href="/Service/Partners/Case?id=3">
+            利用GS1编码规则实施UDI满足中国法规要求，实现内部追溯</a></li>
+
+          <li><a target="_blank" href="/Service/Partners/Case?id=2">
+            多米诺集团在医疗领域的GS1标准应用案例</a></li>
+
+          <li><a target="_blank" href="/Service/Partners/Case?id=1">
+            北京爱创科技股份有限公司进口药品GS1应用案例</a></li>
+
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      service: '全部服务行业',
+      serviceList: [{value: '全部服务行业'}, {value: '医疗'}, {value: '零售'}, {value: '电子商务'}, {value: '食品烟酒'}, {value: '物流'}, {value: '服装'}, {value: '快速消费品'}, {value: '消费电子产品'}, {value: '制造和零部件'}, {value: '建材'}, {value: '其他'},]
+    }
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss">
+.n-service.partners-case-list {
+  .notice {
+    margin: 10px 0;
+  }
+
+  p {
+    font-family: PingFangSC-Regular, PingFang SC;
+    margin: 10px 0;
+    font-size: 14px;
+    font-weight: 400;
+    color: #414345;
+    text-indent: 2em;
+  }
+
+  .barcodev-title {
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 500;
+    color: #F26335;
+    margin: 10px 0;
+  }
+
+  .search {
+    .col-lg-4 {
+      margin-bottom: 15px;
+    }
+  }
+
+  .main-list{
+    padding-left: 40px;
+  }
+
+  .main-list li {
+    color: #ccc;
+    /*height: 40px;*/
+    line-height: 40px;
+    list-style: disc;
+    border-bottom: 1px dashed #eee;
+    font-size: 14px;
+  }
+
+  .main-list li a {
+    width: 100%;
+    display: inline-block;
+    line-height: 28px;
+    vertical-align: top;
+    padding: 8px 0;
+    color: #008dbd;
+    text-decoration: none;
+    font-weight: 500;
+    word-break: break-word;
+  }
+
+  .main-list li:hover {
+    background-color: #eee;
+  }
+
+}
+</style>