fix:快速查询模块默认图片替换

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <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="icon" href="<%= BASE_URL %>title.ico">
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

src/router/index.js

@@ -7,95 +7,6 @@ import local from '../utils/local'
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/login',
-    component: Login,
-    meta: { title: '登录', activeMenu: '/login' }
-  },
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/disease-resistance/disease-resistance',
-    meta: { title: '首页', activeMenu: '/disease-resistance/disease-resistance' }
-  },
-  {
-    // 遗传病风险
-    path: '/disease-resistance',
-    component: Layout,
-    children: [
-      {
-        path: '/disease-resistance/disease-resistance',
-        component: () =>
-          import('../views/disease-resistance/disease-resistance.vue'),
-        meta: { title: '遗传病风险', activeMenu: '/disease-resistance/disease-resistance' }
-      }
-    ]
-  },
-  {
-    // 基因管理
-    path: '/geneMgmt',
-    component: Layout,
-    children: [
-      {
-        path: '/geneMgmt/SPN',
-        component: () =>
-          import('../views/geneMgmt/SPN.vue'),
-        meta: { title: 'SPN位点管理', activeMenu: '/geneMgmt/SPN' }
-      },
-      {
-        path: '/geneMgmt/SPNPanel',
-        component: () =>
-          import('../views/geneMgmt/SPNPanel.vue'),
-        meta: { title: 'SPN Panel位点管理', activeMenu: '/geneMgmt/SPNPanel' }
-      },
-      {
-        path: '/geneMgmt/sequence',
-        component: () =>
-          import('../views/geneMgmt/sequence.vue'),
-        meta: { title: '原始测序数据', activeMenu: '/geneMgmt/sequence' }
-      }
-    ]
-  },
-
-  {
-    // 繁育管理
-    path: '/breedMgmt',
-    component: Layout,
-    children: [
-      {
-        path: '/breedMgmt/BLUP',
-        component: () =>
-          import('../views/breedMgmt/BLUP.vue'),
-        meta: { title: 'BLUP', activeMenu: '/breedMgmt/BLUP' }
-      },
-      {
-        path: '/breedMgmt/paternityTest',
-        component: () =>
-          import('../views/breedMgmt/paternityTest.vue'),
-        meta: { title: '亲子鉴定', activeMenu: '/breedMgmt/paternityTest' }
-      },
-      {
-        path: '/breedMgmt/lineage',
-        component: () =>
-          import('../views/breedMgmt/lineage.vue'),
-        meta: { title: '血统管理', activeMenu: '/breedMgmt/lineage' }
-      }
-    ]
-  },
-
-  {
-    // 进化分析
-    path: '/phylogeneticAnalysis',
-    component: Layout,
-    children: [
-      {
-        path: '/phylogeneticAnalysis/evolutionaryTree',
-        component: () =>
-          import('../views/phylogeneticAnalysis/evolutionaryTree.vue'),
-        meta: { title: '进化树', activeMenu: '/phylogeneticAnalysis/evolutionaryTree' }
-      },
-    ]
-  },
     {
         path: '/login',
         component: Login,
@@ -104,8 +15,8 @@ const routes = [
     {
         path: '/',
         component: Layout,
-        redirect: '/disease-resistance/disease-resistance',
-        meta: { title: '', activeMenu: '/disease-resistance/disease-resistance' }
+        redirect: '/login',
+        meta: { title: '', activeMenu: '/login' }
     }, {
         // 首页
         path: '/index',
@@ -118,6 +29,81 @@ const routes = [
                 meta: { title: '首页', activeMenu: '/index/index' }
             }
         ]
+    }, {
+        // 快速查询
+        path: '/quick-Search/quick-Search',
+        component: Layout,
+        children: [
+            {
+                path: '/quick-Search/quick-Search',
+                component: () =>
+                    import('../views/quick-Search/quick-Search.vue'),
+                meta: { title: '快速查询', activeMenu: '/quick-Search/quick-Search' }
+            }
+        ]
+    }, {
+        // 基因管理
+        path: '/geneMgmt',
+        component: Layout,
+        children: [
+            {
+                path: '/geneMgmt/SPN',
+                component: () =>
+                    import('../views/geneMgmt/SPN.vue'),
+                meta: { title: 'SPN位点管理', activeMenu: '/geneMgmt/SPN' }
+            },
+            {
+                path: '/geneMgmt/SPNPanel',
+                component: () =>
+                    import('../views/geneMgmt/SPNPanel.vue'),
+                meta: { title: 'SPN Panel位点管理', activeMenu: '/geneMgmt/SPNPanel' }
+            },
+            {
+                path: '/geneMgmt/sequence',
+                component: () =>
+                    import('../views/geneMgmt/sequence.vue'),
+                meta: { title: '原始测序数据', activeMenu: '/geneMgmt/sequence' }
+            }
+        ]
+    },
+    {
+        // 繁育管理
+        path: '/breedMgmt',
+        component: Layout,
+        children: [
+            {
+                path: '/breedMgmt/BLUP',
+                component: () =>
+                    import('../views/breedMgmt/BLUP.vue'),
+                meta: { title: 'BLUP', activeMenu: '/breedMgmt/BLUP' }
+            },
+            {
+                path: '/breedMgmt/paternityTest',
+                component: () =>
+                    import('../views/breedMgmt/paternityTest.vue'),
+                meta: { title: '亲子鉴定', activeMenu: '/breedMgmt/paternityTest' }
+            },
+            {
+                path: '/breedMgmt/lineage',
+                component: () =>
+                    import('../views/breedMgmt/lineage.vue'),
+                meta: { title: '血统管理', activeMenu: '/breedMgmt/lineage' }
+            }
+        ]
+    },
+
+    {
+        // 进化分析
+        path: '/phylogeneticAnalysis',
+        component: Layout,
+        children: [
+            {
+                path: '/phylogeneticAnalysis/evolutionaryTree',
+                component: () =>
+                    import('../views/phylogeneticAnalysis/evolutionaryTree.vue'),
+                meta: { title: '进化树', activeMenu: '/phylogeneticAnalysis/evolutionaryTree' }
+            },
+        ]
     },
     {
         // 遗传病风险
@@ -145,17 +131,24 @@ const routes = [
             }
         ]
     },
+
     {
-        // 快速查询
-        path: '/quick-Search/quick-Search',
+        // 品种资源
+        path: '/variety-resources',
         component: Layout,
         children: [
             {
-                path: '/quick-Search/quick-Search',
+                path: '/variety-resources/variety-resources',
                 component: () =>
-                    import('../views/quick-Search/quick-Search.vue'),
-                meta: { title: '快速查询', activeMenu: '/quick-Search/quick-Search' }
-            }
+                    import('../views/variety-resources/variety-resources.vue'),
+                meta: { title: '品种资源', activeMenu: '/variety-resources/variety-resources' }
+            },
+            {
+                path: '/variety-resources/pig-list',
+                component: () =>
+                    import('../views/variety-resources/pig-list.vue'),
+                meta: { title: '品种猪', activeMenu: '/variety-resources/pig-list' }
+            },
         ]
     }
 ]
@@ -165,7 +158,6 @@ const router = new VueRouter({
 })
 // 前置路由守卫
 router.beforeEach((to, from, next) => {
-    // to到哪里取 from 从哪里来 next 放行
     const token = local.get('token_sd')
     if (to.meta.title) { // 修改总标题
         document.title = '基芯农育种' + '-' + to.meta.title // routes数组中--meta是关键
@@ -176,7 +168,8 @@ router.beforeEach((to, from, next) => {
         if (to.path === '/login') {
             next()
         }
-        next('/login')
     }
-})
+}
+    // next('/login')
+)
 export default router

src/views/archive-information/archive-information.vue

@@ -103,10 +103,11 @@
         class="demo-ruleForm"
         style="padding-left: 20px; box-sizing: border-box"
       >
-        <el-form-item label="名称" prop="pic">
+        <div style="height: 40px"></div>
+        <el-form-item label="名称" prop="pic1">
           <el-input
             type="text"
-            v-model="searchForm.pic"
+            v-model="searchForm.pic1"
             placeholder="请输入名称"
           />
         </el-form-item>
@@ -158,11 +159,24 @@
       </span>
     </el-dialog>
     <el-dialog :visible.sync="dialogVisible" width="40%">
+      <div
+        style="
+          color: black;
+          font-weight: bold;
+          font-size: 20px;
+          padding-left: 2%;
+          border-bottom: 2px solid #f1f1f1;
+          padding-bottom: 18px;
+          margin-bottom: 20px;
+        "
+      >
+        平台认证
+      </div>
       <el-form
         :model="searchForm"
         status-icon
         ref="searchForm"
-        label-width="110px"
+        label-width="80px"
         class="demo-ruleForm"
         style="padding-left: 20px; box-sizing: border-box"
       >
@@ -170,7 +184,7 @@
           <el-input
             type="text"
             v-model="searchForm.pic"
-            placeholder="请输入平台名称"
+            placeholder="请输入平台名称（爱农智慧牧场）"
           />
         </el-form-item>
         <el-form-item
@@ -181,7 +195,7 @@
           <el-input
             type="text"
             v-model="searchForm.title"
-            placeholder="请输入手机号"
+            placeholder="请输入手机号（爱农智慧牧场）"
           />
         </el-form-item>
         <el-form-item
@@ -192,7 +206,7 @@
           <el-input
             type="password"
             v-model="searchForm.address"
-            placeholder="请输入密码"
+            placeholder="请输入密码（爱农智慧牧场）"
           />
         </el-form-item>
         <el-form-item
@@ -209,7 +223,7 @@
           <el-input
             type="text"
             v-model="searchForm.address1"
-            placeholder="请输入获取编码"
+            placeholder="请输入获取数据唯一编码"
           />
         </el-form-item>
       </el-form>
@@ -233,7 +247,8 @@ export default {
       dialogVisible: false,
       searchForm: {
         farm: '',
-        number: ''
+        number: '',
+        pic: '爱农智慧牧场'
       },
       evalue: '',
       tableData: [
@@ -426,4 +441,7 @@ export default {
 /deep/.el-form-item__content {
   margin-bottom: 20px;
 }
+/deep/.el-dialog__body {
+  padding: 0px 10px 10px 10px;
+}
 </style>

src/views/breedMgmt/BLUP.vue

@@ -66,15 +66,15 @@
         ></el-table-column>
 
         <el-table-column label="详情">
-          <template slot-scope="scope">
-            <el-button size="mini" type="text" class="detail-btn"
-              ><a
-                target="_blank"
-                href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/99715011920%E7%89%9B%E9%81%97%E4%BC%A0%E7%97%85%E5%9F%BA%E5%9B%A0%E6%A3%80%E6%B5%8B%E6%8A%A5%E5%91%8A.pdf"
-                >查看</a
-              ></el-button
-            >
-          </template>
+          <!-- <template slot-scope="scope"> -->
+          <el-button size="mini" type="text" class="detail-btn"
+            ><a
+              target="_blank"
+              href="https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/99715011920%E7%89%9B%E9%81%97%E4%BC%A0%E7%97%85%E5%9F%BA%E5%9B%A0%E6%A3%80%E6%B5%8B%E6%8A%A5%E5%91%8A.pdf"
+              >查看</a
+            ></el-button
+          >
+          <!-- </template> -->
         </el-table-column>
       </el-table>
       <el-table

src/views/disease-resistance/disease-resistance.vue

@@ -62,7 +62,7 @@
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
-          :page-sizes="[20, 50, 100]"
+          :page-sizes="[10, 50, 100]"
           layout="total, sizes, prev, pager, next, jumper"
           :current-page="form.page"
           :page-size="form.pagesize"
@@ -85,17 +85,66 @@ export default {
       tableData: [
         {
           id: 1,
-          farm: '爱农养殖场',
+          farm: '若尔盖',
           number: '82010000990',
           age: '6',
           result: '携带'
         },
         {
           id: 2,
-          farm: '小新养殖场',
+          farm: '若尔盖',
           number: '82010000991',
           age: '6',
           result: '未携带'
+        },
+        {
+          id: 3,
+          farm: '若尔盖',
+          number: '82010000992',
+          age: '6',
+          result: '携带'
+        },
+        {
+          id: 4,
+          farm: '若尔盖',
+          number: '82010000993',
+          age: '6',
+          result: '未携带'
+        },
+        {
+          id: 5,
+          farm: '若尔盖',
+          number: '82010000994',
+          age: '6',
+          result: '未携带'
+        },
+        {
+          id: 6,
+          farm: '若尔盖',
+          number: '82010000995',
+          age: '6',
+          result: '未携带'
+        },
+        {
+          id: 7,
+          farm: '若尔盖',
+          number: '82010000996',
+          age: '6',
+          result: '未携带'
+        },
+        {
+          id: 8,
+          farm: '若尔盖',
+          number: '82010000997',
+          age: '6',
+          result: '未携带'
+        },
+        {
+          id: 9,
+          farm: '若尔盖',
+          number: '82010000973',
+          age: '6',
+          result: '未携带'
         }
       ],
       form: {
@@ -130,6 +179,12 @@ export default {
       } else {
         return 'textAlign: center'
       }
+    },
+    // 查看
+    detailClick() {
+      window.open(
+        'https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/99715011920%E7%89%9B%E9%81%97%E4%BC%A0%E7%97%85%E5%9F%BA%E5%9B%A0%E6%A3%80%E6%B5%8B%E6%8A%A5%E5%91%8A.pdf'
+      )
     }
   }
 }

src/views/index/index.vue

@@ -28,7 +28,7 @@
             <div class="tabsdata">
               <div class="tabs">
                 <div>平均育种值</div>
-                <div>132</div>
+                <div>258</div>
               </div>
             </div>
             <div style="text-align: center">
@@ -46,7 +46,7 @@
         <div style="display: flex">
           <img
             style="width: 100%"
-            src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/303d04e7494f5e595cc624c05e03e57c4d.jpg"
+            src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/3045dfe9ebb60507a75748a7c58393a0da.jpg"
             alt=""
           />
           <!-- <div

src/views/layout/left-menu.vue

@@ -11,8 +11,8 @@
       <el-image
         class="el-img-box"
         v-else
-        style="height: 72px; width: 80px"
-        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/youpin/20240724/xl34jq31yvdzd73b5im9.png"
+        style="height: 72px; width: 100%; background-color: white"
+        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/304274395c99e45476a1c783cc806e72b8.jpg"
         fit="cover"
       ></el-image>
     </div>
@@ -27,9 +27,9 @@
         <i class="el-icon-price-tag"></i>
         <span slot="title">首页</span>
       </el-menu-item>
-      <el-menu-item index="/disease-resistance/disease-resistance">
-        <i class="el-icon-orange"></i>
-        <span slot="title">遗传病风险</span>
+      <el-menu-item index="/quick-Search/quick-Search">
+        <i class="el-icon-folder-checked"></i>
+        <span slot="title">快速查询</span>
       </el-menu-item>
       <el-submenu index="66">
         <template slot="title">
@@ -44,6 +44,7 @@
           <el-menu-item index="/geneMgmt/sequence">原始测序数据</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
+
       <el-submenu index="67">
         <template slot="title">
           <i class="el-icon-news"></i>
@@ -66,14 +67,18 @@
           >
         </el-menu-item-group>
       </el-submenu>
+      <el-menu-item index="/disease-resistance/disease-resistance">
+        <i class="el-icon-orange"></i>
+        <span slot="title">遗传病风险</span>
+      </el-menu-item>
+      <el-menu-item index="/variety-resources/variety-resources">
+        <i class="el-icon-copy-document"></i>
+        <span slot="title">品种资源</span>
+      </el-menu-item>
       <el-menu-item index="/archive-information/archive-information">
         <i class="el-icon-document"></i>
         <span slot="title">档案信息</span>
       </el-menu-item>
-      <el-menu-item index="/quick-Search/quick-Search">
-        <i class="el-icon-folder-checked"></i>
-        <span slot="title">快速查询</span>
-      </el-menu-item>
     </el-menu>
   </div>
 </template>
@@ -129,7 +134,7 @@ export default {
 
   .logo {
     max-width: 220px;
-    height: 80px;
+    height: 72px;
     color: #fff;
     font-size: 25px;
     font-weight: bold;

src/views/quick-Search/quick-Search.vue

@@ -95,26 +95,61 @@
     >
       <img
         style="width: 80%"
-        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/307d7b147050a9475b2580aa1d1ae44476.jpg"
+        src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30934b551c5bab2f2727d4dfa9ccd85a69.jpg"
         alt=""
       />
     </div>
     <el-dialog :visible.sync="dialogVisible" width="40%">
       <div style="text-align: center">
-        <div class="btmstyle">1</div>
+        <div class="btmstyle">综合分子育种报告</div>
         <div class="textstyle">
-          <div>标记编号:213</div>
-          <div>养殖场:234</div>
-          <div>品种信息:43223</div>
+          <div>标记编号:82010000990</div>
+          <div>养殖场:若尔盖</div>
+          <div>品种信息:牦牛</div>
+        </div>
+        <div class="textdiv">
+          <div style="font-weight: bold; padding: 30px 0px 6px 14px">
+            1. 繁育管理的育种值
+          </div>
+          <div class="pl">综合育种值：225.85</div>
+          <div class="pl">性状名称: 外貌评分、生长性状、产奶性状</div>
+          <div class="pl">
+            分析说明:
+            该个体在生长性能上的优异表现，更在经济性能上展现了其潜在的高价值。基于此，我们强烈推荐将此个体作为未来育种计划中的亲本首选，以期望通过其遗传优势，孕育出更多具备优良性状的后代。
+          </div>
+        </div>
+        <div class="textdiv">
+          <div style="font-weight: bold; padding: 30px 0px 6px 14px">
+            2. 进化分析结果中的近交系数
+          </div>
+          <div class="pl">近交系数: 0</div>
+          <div class="pl">
+            分析说明:
+            经过精确的遗传评估，该个体和82010001456的近交系数计算结果为零，意味着它们在遗传上不存在亲缘关系。因此，这两个个体可以作为无亲缘关系的育种候选者，进行交配以产生后代。这样的配对有助于避免近交衰退，同时促进遗传多样性的保持，为育种项目带来潜在的遗传增益。
+          </div>
         </div>
         <div
-          style="
-            text-align: left;
-            padding: 30px 0px 18px 14px;
-            font-weight: bold;
-          "
+          class="textdiv"
+          style="border-bottom: 2px solid #ebebeb; padding-bottom: 50px"
         >
-          11
+          <div style="font-weight: bold; padding: 30px 0px 6px 14px">
+            3. 携带遗传基因风险警告
+          </div>
+          <div class="pl">风险等级:低</div>
+          <div class="pl">
+            建议措施:
+            经过专业的基因检测分析，确认该个体并未携带任何已知的遗传性疾病相关基因。在进行繁育计划时，可以放心地将该个体纳入考虑，以实现遗传改良的目标。
+          </div>
+        </div>
+      </div>
+      <div
+        class="textdiv"
+        style="border-bottom: 2px solid #ebebeb; padding-bottom: 20px"
+      >
+        <div style="font-weight: bold; padding: 30px 0px 6px 14px">总结</div>
+        <div class="pl">
+          繁育：经过严格的遗传评估和基因检测，该个体证实具备出色的生长性能和繁殖能力。特别值得注意的是，基因检测结果表明，该个体并未携带任何已知的遗传性疾病相关基因。因此，我们可以放心地选择此个体作为繁育计划中的亲本，以期在维持遗传多样性的同时，促进后代群体生产性能的提升和遗传改良。
+          选配：该个体和82010001456的近交系数为0，不存在亲缘关系，可放心进行繁育。
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
@@ -128,14 +163,14 @@
     </el-dialog>
   </div>
 </template>
-
-<script>
+  
+  <script>
 export default {
   data() {
     return {
       loading: false,
       showtable: false,
-      dialogVisible: true,
+      dialogVisible: false,
       searchForm: {
         a: '',
         b: '',
@@ -214,8 +249,13 @@ export default {
     detailClick() {
       this.$router.push('/phylogeneticAnalysis/evolutionaryTree')
     },
-    report() {
-      this.dialogVisible = true
+    report(row) {
+      if (row.b == '82010000990') {
+        window.open(
+          'https://smart-1259258654.cos.ap-guangzhou.myqcloud.com/pdf/82010000990%E7%BB%BC%E5%90%88%E5%88%86%E5%AD%90%E8%82%B2%E7%A7%8D%E6%8A%A5%E5%91%8A.pdf',
+          '_blank'
+        )
+      }
     },
     // 搜索
     searchClick() {
@@ -251,8 +291,8 @@ export default {
   }
 }
 </script>
-
-<style lang="less" scoped>
+  
+  <style lang="less" scoped>
 .container-box {
   min-height: calc(100vh - 84px);
   padding: 15px;
@@ -285,6 +325,9 @@ export default {
 .btmstyle {
   border-bottom: 2px solid #ebebeb;
   padding-bottom: 26px;
+  font-size: 24px;
+  font-weight: bold;
+  color: black;
 }
 .textstyle {
   display: flex;
@@ -292,7 +335,15 @@ export default {
   border-bottom: 2px solid #ebebeb;
 }
 .textstyle div {
-  margin-right: 15%;
+  margin-right: 10%;
+}
+.textdiv div {
+  text-align: left;
+}
+.pl {
+  padding-left: 14px;
+  padding-bottom: 4px;
+  line-height: 18px;
 }
 // table
 /deep/.el-table th.el-table__cell {

src/views/variety-resources/pig-list.vue

@@ -0,0 +1,961 @@
+<template>
+  <div class="container-box">
+    <div class="top-box">
+      <i
+        class="el-icon-arrow-left"
+        style="font-size: 24px"
+        @click="backClick"
+      ></i>
+      <div class="top-title">猪</div>
+    </div>
+    <div class="list-box">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        size="mini"
+        border
+        stripe
+        :header-cell-style="{ textAlign: 'center', color: '#606266' }"
+        :cell-style="{ textAlign: 'center' }"
+      >
+        <el-table-column prop="id" label="序号"></el-table-column>
+        <el-table-column prop="number" label="品种登记号"></el-table-column>
+        <el-table-column prop="cate" label="畜种名称"></el-table-column>
+        <el-table-column prop="varieties" label="品种名称"></el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              @click="detailClick(scope.row)"
+              icon="el-icon-view"
+              class="detail-btn"
+              >查看详情</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
+      <el-descriptions :column="2" border>
+        <el-descriptions-item
+          label="品种登记号"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >X-01-01-001-01</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="畜种名称"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >猪</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="品种来源"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          地方</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="品种名称"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+          民猪</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="品种英文名"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        ></el-descriptions-item>
+        <el-descriptions-item
+          label="品种别名"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >东北民猪</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="类群名称"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="类群别名"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="图片(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          <el-image
+            style="width: 80px; height: 50px; overflow: hidden"
+            :src="boarImage"
+            fit="contain"
+            :preview-src-list="[boarImage]"
+          >
+            <div
+              slot="error"
+              class="image-slot"
+              style="
+                width: 50px;
+                height: 50px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #f0f0f0;
+              "
+            >
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="图片(母)"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+          <el-image
+            style="width: 80px; height: 50px; overflow: hidden"
+            :src="sowImage"
+            fit="contain"
+            :preview-src-list="[sowImage]"
+          >
+            <div
+              slot="error"
+              class="image-slot"
+              style="
+                width: 50px;
+                height: 50px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #f0f0f0;
+              "
+            >
+              <i class="el-icon-picture-outline"></i>
+            </div>
+          </el-image>
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="影像(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="影像(母)"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="图像(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="图像(母)"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="照片(群体)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="图像(群体)"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="影像(群体)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="引进国家"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="信息来源"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          国家品种志
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="中心产区"
+          content-class-name="my-content"
+          label-class-name="my-label"
+        >
+          辽宁省岫岩、建昌、复县、海城、昌图、朝阳；吉林省九站、桦甸、永吉、靖宇、通化；黑龙江省绥滨、富锦、集贤、北安、德都、双城、兰西；河北省迁西、遵化、兴隆、丰宁等。
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="主要分布区"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          东北和华北部分地区
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="最高海拔"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="最低海拔"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="气候类型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          温带大陆性季风半温润气候地型
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="地型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >以丘陵为主
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="年均温度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          8
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="年最高温度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >25
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="年最低温度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          -14
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="相对湿度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="年均降水量"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          647
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="无霜期"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="土壤类型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <!-- ----------- -->
+        <el-descriptions-item
+          label="作物种类"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >高粱、玉米、大豆、谷子、棉花、芝麻、向日葵、甜菜等
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="生态适应性"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >适应性强
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="抗病能力"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="独特性状"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >抗寒能力强
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="典型生态影像"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="填报人"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="填报单位"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >中国农业科学院畜牧研究所
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="更新日期 "
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="采集日期"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >01/01/1982
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="群体总数"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >850
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="公畜数量"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="配种公畜数量"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="母畜数量"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="繁殖母畜数量"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >2
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="品种杂交比例"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="人工授精公畜"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="人工授精母畜"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="保护等级"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="保护方法"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="濒危状态"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="濒危依据及说明"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体貌概述"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          头中等大，面直，耳大下垂，体躯扁平，背腰窄狭，臀部斜。四肢粗壮。全身被毛黑色，毛密而长，猪鬃较多，冬季密生绒毛，起防寒保温作用。
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >体躯扁平，背腰窄狭，臀部倾斜。四肢粗壮。
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="毛色"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >全身被毛黑色，毛密而长。
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="肤色"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="头型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >头中等大，面直长
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="角型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="耳型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >耳大下垂
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="乳头个数"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >14
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体高(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >86
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体斜长(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >148
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="胸围(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >139
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体重(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >195
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体高(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >82
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体斜长(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >141
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="胸围(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >132
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="体重(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >151
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="独特特征"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="性成熟日龄(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >90
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="配种日龄(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >270
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="性成熟日龄(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >120
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="配种日龄(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >240
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="发情月份"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >全年多次发情
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="发情周期"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >21
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="怀孕期"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >114
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="初产仔数"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >11
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="经产仔数"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >12
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="初生重(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="初生重(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="断奶日龄"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >60
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="断奶重"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="断奶窝重"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >120
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="断奶活仔数"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >9.7
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="空怀天数"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="繁殖率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="繁殖成活率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="主要用途"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >肉脂兼用
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="产奶量"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="乳脂率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="料肉比"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="屠宰活重"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >90
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="屠宰日龄"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="胴体重"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="屠宰率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >72
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="净肉率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="瘦肉率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >45
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="肉色评分"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >3
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="肉ph1"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >6.3
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="肉ph2"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="肉系水力"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >76.3
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="大理石纹评分"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >4
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="肉嫩度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="肉风味"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="毛绒类型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="毛绒产量(公)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="毛绒产量(母)"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="毛绒纤维细度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="毛绒纤维长度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="净毛绒率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="挽力"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="速率"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="饲养类型"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >舍饲和放牧
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="补饲状况"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >精料及农副产品
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="管理容易否"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >易管理
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="遗传检测"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="检测单位"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="检测人"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="基因组文库"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="文件存放单位"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="品种评价及开发利用"
+          label-class-name="my-label"
+          content-class-name="my-content"
+        >
+          民猪具有抗寒能力强，体质强健，产仔较多，脂肪沉积能力强和肉质好的特点，适于放牧和较粗放的管理，与约克夏、巴克夏、苏白、克米洛夫和长白猪杂交，培育成哈白猪、新金猪、东北花猪和三江白猪。这些新品种猪大都保留了民猪抗寒性强的特点，繁殖力高和肉质好的特点，但胴体脂肪率高，皮较厚，后腿肌肉不发达，增重较慢，今后应继续加强本品种选育，提高胴体的瘦肉率。
+        </el-descriptions-item>
+      </el-descriptions>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          id: '1',
+          number: 'x-01-01-001-01',
+          cate: '猪',
+          varieties: '民猪'
+        },
+        {
+          id: '2',
+          number: 'x-01-01-002-01',
+          cate: '猪',
+          varieties: '八眉猪'
+        },
+        {
+          id: '3',
+          number: 'x-01-01-003-01',
+          cate: '猪',
+          varieties: '黄淮海黑猪'
+        },
+        {
+          id: '4',
+          number: 'x-01-01-003-02',
+          cate: '猪',
+          varieties: '黄淮海黑猪'
+        },
+        {
+          id: '5',
+          number: 'x-01-01-003-03',
+          cate: '猪',
+          varieties: '黄淮海黑猪'
+        },
+        {
+          id: '6',
+          number: 'x-01-01-003-04',
+          cate: '猪',
+          varieties: '黄淮海黑猪'
+        },
+        {
+          id: '7',
+          number: 'x-01-01-003-05',
+          cate: '猪',
+          varieties: '黄淮海黑猪'
+        },
+        {
+          id: '8',
+          number: 'x-01-01-004-01',
+          cate: '猪',
+          varieties: '汉江黑猪'
+        },
+        {
+          id: '9',
+          number: 'x-01-01-005-01',
+          cate: '猪',
+          varieties: '沂蒙黑猪'
+        },
+        {
+          id: '10',
+          number: 'x-01-01-006-01',
+          cate: '猪',
+          varieties: '两广小花猪'
+        },
+        {
+          id: '11',
+          number: 'x-01-01-007-01',
+          cate: '猪',
+          varieties: '粤东猪'
+        }
+      ],
+      dialogVisible: false,
+      boarImage: require('../../assets/img/gongzhu.png'),
+      sowImage: require('../../assets/img/muzhu.png')
+    }
+  },
+  methods: {
+    // 返回
+    backClick() {
+      window.history.go(-1)
+    },
+    detailClick() {
+      this.dialogVisible = true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  min-height: calc(100vh - 84px);
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  .top-box {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    .top-title {
+      background-color: #5aad00;
+      color: #fff;
+      padding: 10px 20px;
+      border-radius: 5px;
+      width: 80px;
+    }
+  }
+}
+// 弹层--header
+/deep/.el-dialog__header {
+  font-weight: bold;
+  box-shadow: 0 0.2px 1px rgba(0, 0, 0, 0.12), 0 0 4px rgba(0, 0, 0, 0.04);
+}
+
+/deep/ .my-label {
+  background: #f0f8ff;
+  width: 120px;
+  text-align: right !important;
+  // display: flex;
+  // align-items: center;
+  // align-items: center;
+}
+/deep/ .my-content {
+  width: 425px;
+}
+</style>

src/views/variety-resources/variety-resources.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="container-box">
+    <div class="all-box">
+      <div class="top-box">
+        <div class="top-title1">家畜品种库</div>
+      </div>
+      <div class="content-box">
+        <div
+          class="item-box"
+          v-for="item in livestockList"
+          :key="item.id"
+          @click="livestockClick(item)"
+        >
+          <div class="img-box">
+            <img :src="item.url" alt="" style="width: 100%" />
+          </div>
+          <div class="title">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="all-box" style="margin-top: 60px">
+      <div class="top-box">
+        <div class="top-title1">家禽品种库</div>
+      </div>
+      <div class="content-box">
+        <div
+          class="item-box"
+          v-for="item in poultryList"
+          :key="item.id"
+          @click="poultryClick(item)"
+        >
+          <div class="img-box">
+            <img :src="item.url" alt="" style="width: 100%" />
+          </div>
+          <div class="title">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      livestockList: [
+        {
+          id: 1,
+          url: require('../../assets/img/zhu.png'),
+          title: '猪'
+        },
+        {
+          id: 2,
+          url: require('../../assets/img/niu.png'),
+          title: '牛'
+        },
+        {
+          id: 3,
+          url: require('../../assets/img/yang.png'),
+          title: '羊'
+        },
+        {
+          id: 4,
+          url: require('../../assets/img/lv.png'),
+          title: '驴'
+        }
+      ],
+      poultryList: [
+        {
+          id: 1,
+          url: require('../../assets/img/huoji.png'),
+          title: '火鸡'
+        },
+        {
+          id: 2,
+          url: require('../../assets/img/e.png'),
+          title: '鹅'
+        },
+        {
+          id: 3,
+          url: require('../../assets/img/ya.png'),
+          title: '鸭'
+        },
+        {
+          id: 4,
+          url: require('../../assets/img/ji.png'),
+          title: '鸡'
+        }
+      ]
+    }
+  },
+  methods: {
+    livestockClick(item) {
+      console.log(item, 'item.name')
+      if (item.title == '猪') {
+        this.$router.push({
+          path: '/variety-resources/pig-list'
+        })
+      } else {
+        this.$alert('建设中，请耐心等待！', '提示', {
+          confirmButtonText: '确定',
+          callback: (action) => {}
+        })
+      }
+    },
+    poultryClick(item) {
+      this.$alert('建设中，请耐心等待！', '提示', {
+        confirmButtonText: '确定',
+        callback: (action) => {}
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container-box {
+  min-height: calc(100vh - 84px);
+  padding: 15px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .all-box {
+    .top-box {
+      border-radius: 6px;
+      background: #fff;
+      padding: 10px;
+      margin-bottom: 10px;
+      .top-title1 {
+        background-color: #5aad00;
+        color: #fff;
+        padding: 10px 20px;
+        border-radius: 5px;
+        width: 80px;
+      }
+    }
+    .content-box {
+      border-radius: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      background: #fff;
+      padding: 10px;
+      .item-box {
+        flex: 1;
+        cursor: pointer;
+        margin-right: 20px;
+
+        .img-box {
+          padding: 5px 15px;
+          border: 1px solid #f2f2f2;
+        }
+        .title {
+          margin-top: 10px;
+          width: 100%;
+          font-size: 18px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .item-box:last-child {
+        margin-right: 0px;
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -78,7 +78,7 @@ module.exports = {
   chainWebpack: config => {
     // if (IS_PRODUCTION) {
     config.plugin('html').tap(args => {
-      args[0].title = '智慧畜牧平台'
+      args[0].title = '基芯农育种'
       args[0].cdn = cdn
       return args
     })