src/api/enterpriseArchives/index.js

@@ -23,3 +23,10 @@ export function searchList(params) {
         params
     })
 }
+//卡片列表
+export function cardLists() {
+    return request({
+        url: '/safety/enterprise-archives/search-engine-homepage/company-history',
+        method: 'get'
+    })
+}

src/views/enterpriseArchives/componets/card.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="cardBox"> 
+        <div class="cardContent">
+            <!-- 卡片展示 -->
+            <el-row :gutter="20">
+                <el-col :span="6" class="cardCol" v-for="(i, index) in cardListArr" :key="index">
+                    <div class="cardList">
+                        <div class="cardListHead">
+                            <span>{{ i.title }}</span>
+                        </div>
+                        <div class="cardListBody">
+                            <div class="bodySign">
+                                <!-- 中间标签 -->
+                                <div class="sign">
+                                    <span class="signGreen">危化企业</span>
+                                    <span class="signRed">民爆</span>
+                                    <span class="signBlue">易制毒</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="cardListFoot">
+                            <el-descriptions class="margin-top" :column="2">
+                                <el-descriptions-item label="企业员工">{{ i.num }}</el-descriptions-item>
+                                <el-descriptions-item label="是否有过处罚">
+                                    <template slot-scope="scope">
+                                        <span v-if="scope.row.isHandle == 1">是</span>
+                                        <span v-else>否</span>
+                                    </template>
+                                </el-descriptions-item>
+                                <el-descriptions-item label="企业安全责任人电话">{{ i.phone }}</el-descriptions-item>
+                            </el-descriptions>
+                            <div class="address">
+                                <img src="@/assets/enterpriseArchives/address.png" alt="">
+                                <span>{{ i.address }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        cardList:{
+            type:Array,
+            default:()=> []
+        }
+    },
+    watch:{
+        cardList:{
+            handler(val){
+                this.cardListArr =val
+            },
+            immediate:true     
+        }
+    },
+    data() {
+        return {
+          cardListArr:[]  
+        }
+    },
+    created() {
+        
+
+    },
+    mounted(){
+        
+    },
+    methods: {
+       
+    },
+}
+</script>
+
+<style lang="less" scoped>
+.cardBox{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    .cardContent {
+        width: 80%;
+    }
+    .cardCol{
+        display: flex;
+        justify-content: center;
+        margin-bottom: 2vh;
+    }
+    .cardList {
+        width: 382px;
+        cursor: pointer;
+        height: 291px;
+        background: url("~@/assets/enterpriseArchives/cardBg.png") no-repeat;
+        .cardListHead {
+            height: 39px;
+            z-index: 99;
+            text-align: center;
+            position: absolute;
+            background: url(data:image/png;base64,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) no-repeat;
+            width: 382px;
+        }
+        .cardListHead span{
+            color: #FFFFFF;
+            display: inline-block;
+            margin-top: 2px;
+        }
+        .cardListBody{
+            width: 100%;
+            display: flex;
+            height: 200px;
+            justify-content: center;
+        }
+        .bodySign {
+            width: 95%;
+            background: url("~@/assets/enterpriseArchives/build.jpg") no-repeat;
+            background-size: cover;
+            position: relative;
+            .sign {
+                position: absolute;
+                bottom: 5px;
+                width: 60%;
+                color: #fff;
+                display: flex;
+                justify-content: space-around;
+                .signGreen{
+                    font-size: 14px;
+                    background: url("~@/assets/enterpriseArchives/signGreen.png") no-repeat;
+                }
+                .signRed{
+                    background: url("~@/assets/enterpriseArchives/signRed.png") no-repeat;
+                }.signBlue{
+                    background: url("~@/assets/enterpriseArchives/signBlue.png") no-repeat;
+                }
+            }
+        }
+        .cardListFoot{
+            color: #fff;
+            padding: 0 10px 0 10px;
+            margin-top: 5px;
+            .address{
+                font-size: 14px;
+                margin-top: 1px;
+                img{
+                    vertical-align: middle;
+                }
+            }
+        }
+        ::v-deep .el-descriptions{
+            width: 80%!important;
+        }
+        ::v-deep .el-descriptions__body{
+            color: #fff;
+            background-color: transparent!important;
+        }
+        ::v-deep .el-descriptions-item__cell{
+            padding-bottom: 3px!important;
+        }
+    }
+}
+</style>

src/views/enterpriseArchives/index.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="main">
-        <div class="searchBody" v-show="!isShow">
+        <div class="searchMain" v-show="!isShow">
+            <div class="searchBox">
+                <div class="searchBody" >
                     <div class="topLogo">
                         <img src="../../assets/companyFile/档案981.png" alt="">
                         企业档案
@@ -15,10 +17,14 @@
                         </el-button>
                     </div>
                     <div class="zjssBox">
-                最近搜索 <div class="ssgs" v-for="(item, index) in historyList" :key="index"><span @click="showResult(item)">{{
+                        <span style="color: #37FDC7;">最近搜索 </span>
+                        <div class="ssgs" v-for="(item, index) in historyList" :key="index"><span class="hisSpan" @click="showResult(item)">{{
                             item }}</span></div>
                     </div>
                 </div>
+            </div>
+            <card :cardList="cardList"></card>
+        </div>
         <result :searchVal="searchVal" :total="total" :historyList="historyList" :resultList="resultList"
             @clearInput="clearInput()" v-if="isShow">
         </result>
@@ -27,10 +33,12 @@
 
 <script>
 import result from './result.vue'
-import { listTotal, historyList, searchList } from '@/api/enterpriseArchives'
+import card from './componets/card.vue'
+import { listTotal, historyList, searchList,cardLists } from '@/api/enterpriseArchives'
 export default {
     components: {
         result,
+        card
     },
     data() {
         return {
@@ -50,7 +58,75 @@ export default {
         this.resultList1 = JSON.parse(JSON.stringify(this.resultList))
 
     },
+    mounted(){
+        this.getCardList()
+    },
     methods: {
+        getCardList(){
+            cardLists().then((res) => {
+                if(res.code == 200) {
+                    this.cardList = res.data
+                }
+            })
+            this.cardList = [
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区B区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'303人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                },
+                {
+                    title:'宁波镇海兴达化工有限公司',
+                    num:'221人',
+                    isHandle:1,
+                    phone:18937886328,
+                    address:'浙江省宁波市镇海区经济技术开发区化工园区A区'
+                }
+            ]
+        },
         showResult(val) {
             if (!val) {
                 this.$message.warning('请输入要查询的关键词')
@@ -105,12 +181,20 @@ export default {
     /deep/.el-scrollbar__wrap {
         margin: 0;
     }
-
+    .searchMain {
+        width: 100%;
+    }
+    .searchBox {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+    }
     .searchBody {
         width: 1050px;
         height: 320px;
-        margin-top: 160px;
+        // margin-top: 160px;
-        border-bottom: 1px solid #6C8097;
+        margin-top: 60px;
+        // border-bottom: 1px solid #6C8097;
 
         .topLogo {
             width: 260px;
@@ -129,7 +213,6 @@ export default {
             }
         }
     }
-
     .totalNum {
         margin-top: 30px;
         width: 100%;
@@ -207,7 +290,7 @@ export default {
 
     .zjssBox {
         height: 40px;
-        margin-top: 60px;
+        margin-top: 20px;
         font-size: 14px;
         color: rgba(208, 222, 238, 0.7);
         letter-spacing: 1px;
@@ -219,6 +302,7 @@ export default {
         .ssgs {
             margin-left: 10px;
             height: 28px;
+            border-radius: 2px;
             width: auto;
             background: rgba(255, 255, 255, 0.2);
             display: flex;
@@ -226,6 +310,9 @@ export default {
             cursor: pointer;
             // background: url('~@/assets/companyFile/矩形.png') no-repeat;
             // background-size: 100% 100%;
+            .hisSpan {
+                padding: 0px 7px 0px 7px;
+            }
 
         }
     }