From 812f83bde996b58bd58f95ee30935e5ebb76cce8 Mon Sep 17 00:00:00 2001
From: lijingyu007 <904564792@qq.com>
Date: Thu, 30 May 2024 11:28:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=97=E5=8C=85=E4=BB=BB=E5=8A=A1=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=9C=8D=E5=8A=A1tab=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                          |   2 +-
 src/page/common/checkbox.vue              |   6 +-
 src/page/homepage/crowdsourcing/crowd.vue | 229 +++++---
 src/page/homepage/tool/toolmarker.vue     | 632 +++++++++++++---------
 4 files changed, 525 insertions(+), 344 deletions(-)

diff --git a/.env.development b/.env.development
index 7e290f0..0c46376 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ ENV = 'development'
 VUE_APP_BASE_API = '/prod-api'
 
 
-VUE_APP_BASE_TARGET = 'http://192.168.0.229:9999'
+VUE_APP_BASE_TARGET = 'http://192.168.0.129:9999'
 # VUE_APP_BASE_TARGET = 'http://192.168.0.129:9999'
 # VUE_APP_BASE_TARGET = 'http://172.16.36.180:9999'
 # VUE_APP_BASE_TARGET = 'http://172.16.36.176:9998'
diff --git a/src/page/common/checkbox.vue b/src/page/common/checkbox.vue
index 9e341b0..d7e5351 100644
--- a/src/page/common/checkbox.vue
+++ b/src/page/common/checkbox.vue
@@ -82,24 +82,22 @@ export default {
     display: none;
 }
 .checkbox >>> .el-checkbox {
-    width: 110px;
+    padding: 8px 10px !important;
     height: 34px !important;
     background: #ffffff;
     border: 1px solid #ebebeb;
     margin-right: 20px;
     margin-bottom: 10px;
     margin-left: 0px !important;
-    line-height: 34px;
     text-align: center;
     box-sizing: border-box;
 }
 .checkbox >>> .is-checked {
     background: #ecf3fd;
-    border: none;
+    border:  1px solid #ecf3fd !important;
 }
 .checkbox >>> .el-checkbox.is-bordered.el-checkbox--medium {
     border-radius: 2px;
-    padding: 0;
 }
 .checkbox >>> .el-checkbox__label {
     padding: unset;
diff --git a/src/page/homepage/crowdsourcing/crowd.vue b/src/page/homepage/crowdsourcing/crowd.vue
index 8a66930..69481d3 100644
--- a/src/page/homepage/crowdsourcing/crowd.vue
+++ b/src/page/homepage/crowdsourcing/crowd.vue
@@ -10,92 +10,104 @@
             src="/assets/home/zhbao1.png"
             alt=""
         />
+      
         <div class="topnavbar">
-            <div class="topnavbarcon" style="display: flex; justify-content: space-between; align-items: end">
-                <div style="width: 100%">
-                    <div style="display: flex; padding-top: 7px">
-                        <div class="typetext">任务类型:</div>
-                        <el-tabs v-model="typeName" @tab-click="showDataTypeChage">
-                            <el-tab-pane label="全部" name="q"></el-tab-pane>
-                            <el-tab-pane
-                                v-for="(item, key) of tasktypelist"
-                                :key="key"
-                                :label="item.dictLabel"
-                                :name="item.dictValue"
-                            >
-                            </el-tab-pane>
-                        </el-tabs>
+            <div class="topnavbarcon">
+                <div class="topnavbarconit">
+                    <div class="topnavbarconitL">任务类型：</div>
+                    <div class="topnavbarconitR">
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: typeName == 'q' }"
+                            @click="taskClick('q')"
+                        >
+                            全部
+                        </div>
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: typeName == item.dictValue }"
+                            v-for="(item, key) of tasktypelist"
+                            :key="key"
+                            @click="taskClick(item.dictValue)"
+                        >
+                            {{ item.dictLabel }}
+                        </div>
                     </div>
-                    <el-divider></el-divider>
-                    <div style="display: flex; padding-top: 7px">
-                        <div class="typetext">金额范围:</div>
-                        <el-tabs v-model="amountrange" @tab-click="showDataTypeChage">
-                            <el-tab-pane label="全部" name="q"></el-tab-pane>
-                            <el-tab-pane
-                                v-for="(item, key) of paytypelist"
-                                :key="key"
-                                :label="item.name"
-                                :name="item.id"
-                            >
-                            </el-tab-pane>
-                        </el-tabs>
+                </div>
+                <div class="topnavbarconit">
+                    <div class="topnavbarconitL">金额范围：</div>
+                    <div class="topnavbarconitR">
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: amountrange == 'q' }"
+                            @click="amoutClick('q')"
+                        >
+                            全部
+                        </div>
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: amountrange == item.id }"
+                            v-for="(item, key) of paytypelist"
+                            :key="key"
+                            @click="amoutClick(item.id)"
+                        >
+                            {{ item.name }}
+                        </div>
                     </div>
-                    <el-divider></el-divider>
-                    <div style="display: flex; padding-top: 7px">
-                        <div class="typetext">项目周期:</div>
-                        <el-tabs v-model="period" @tab-click="showDataTypeChage">
-                            <el-tab-pane label="全部" name="q"></el-tab-pane>
-                            <el-tab-pane
-                                v-for="(item, key) of periodlist"
-                                :key="key"
-                                :label="item.name"
-                                :name="item.id"
-                            >
-                            </el-tab-pane>
-                        </el-tabs>
+                </div>
+                <div class="topnavbarconit">
+                    <div class="topnavbarconitL">项目周期：</div>
+                    <div class="topnavbarconitR">
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: period == 'q' }"
+                            @click="periodClick('q')"
+                        >
+                            全部
+                        </div>
+                        <div
+                            class="topnavbarconitRit"
+                            v-for="(item, key) of periodlist"
+                            :key="key"
+                            :class="{ topnavbarconitRitActive: period == item.id }"
+                            @click="periodClick(item.id)"
+                        >
+                            {{ item.name }}
+                        </div>
                     </div>
-                    <!-- <div v-if="userinform.companyStatus == 2"> -->
-                    <!-- <el-divider></el-divider> -->
-                    <!-- <div class="release" v-if="userinform.companyStatus == 2" @click="publish">我要发布任务</div> -->
-                    <!-- </div> -->
-                    <!-- <div v-else class="piliccomp"> -->
-                    <el-divider></el-divider>
-                    <!-- </div> -->
-                    <div style="display: flex; padding-top: 7px">
-                        <div class="typetext">驻场需求:</div>
-                        <el-tabs v-model="onsiteType" @tab-click="showDataTypeChage">
-                            <el-tab-pane label="全部" name="q"></el-tab-pane>
-                            <el-tab-pane
-                                v-for="(item, key) of residentlist"
-                                :key="key"
-                                :label="item.name"
-                                :name="item.id"
-                            ></el-tab-pane>
-                        </el-tabs>
+                </div>
+                <div class="topnavbarconit">
+                    <div class="topnavbarconitL">驻场要求：</div>
+                    <div class="topnavbarconitR">
+                        <div class="topnavbarconitRit topnavbarconitRitActive">全部</div>
+                        <div class="topnavbarconitRit" v-for="(item, key) of residentlist" :key="key">
+                            {{ item.name }}
+                        </div>
                     </div>
-                    <el-divider></el-divider>
-                    <div style="display: flex; padding-top: 7px">
-                        <div class="typetext">地域要求:</div>
-                        <el-tabs style="margin-top: -15px" v-model="diyuChose" @tab-click="showDataTypeChage">
-                            <v-distpicker
-                                @province="onChangeProvince"
-                                @city="onChangeCity"
-                                :placeholders="placeholders"
-                                :province="province"
-                                :city="city"
-                                hide-area
-                            ></v-distpicker>
-                        </el-tabs>
+                </div>
+                <div class="topnavbarconit topnavbarconitno">
+                    <div class="topnavbarconitL">地域要求：</div>
+                    <div class="topnavbarconitR">
+                        <v-distpicker
+                            @province="onChangeProvince"
+                            @city="onChangeCity"
+                            :placeholders="placeholders"
+                            :province="province"
+                            :city="city"
+                            hide-area
+                        ></v-distpicker>
                     </div>
                 </div>
-                <!-- <div>   
-                    
-                </div> -->
             </div>
         </div>
+
         <div class="decsbtn">
-            <div class="descbtnitem" style="margin-right: 13px" @click="fabuTimeEsc">发布时间<img src="/assets/home/esc.png" style="width:12px;height:12px;margin-left:5px" alt=""></div>
-            <div class="descbtnitem" @click="proMoneyEsc">项目金额 <img src="/assets/home/esc.png" style="width:12px;height:12px;margin-left:5px" alt=""></div>
+            <div class="descbtnitem" style="margin-right: 13px" @click="fabuTimeEsc">
+                发布时间<img src="/assets/home/esc.png" style="width: 12px; height: 12px; margin-left: 5px" alt="" />
+            </div>
+            <div class="descbtnitem" @click="proMoneyEsc">
+                项目金额 <img src="/assets/home/esc.png" style="width: 12px; height: 12px; margin-left: 5px" alt="" />
+            </div>
         </div>
         <div :class="officialwebsite ? 'tytool' : 'notytool'">
             <div v-if="listcrowd.length > 0" v-loading="loading" style="width: 100%">
@@ -306,7 +318,7 @@ export default {
         }
     },
     components: { CrowdsourceTask },
-   
+
     computed: {
         ...mapGetters(['testtypelist', 'feescopelist', 'token', 'userinform']),
     },
@@ -320,6 +332,22 @@ export default {
         this.getList()
     },
     methods: {
+        taskClick(q) {
+            this.typeName = q
+            this.getList()
+        },
+        amoutClick(q) {
+            this.amountrange = q
+            this.getList()
+        },
+        periodClick(q) {
+            this.period = q
+            this.getList()
+        },
+        onsiteTypeClick(q) {
+            this.onsiteType = q
+            this.getList()
+        },
         // 发布时间和项目金额排序
         fabuTimeEsc() {
             this.priceOrder = null
@@ -369,7 +397,6 @@ export default {
         findByvalue,
         findLabelValueByProp,
 
-        
         /** 查询列表 */
         getList() {
             this.loading = true
@@ -494,6 +521,50 @@ export default {
     width: 1200px;
     margin: auto;
 }
+.topnavbarconit {
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid #dcdfe6;
+}
+.topnavbarconitno {
+     border-bottom: unset;
+}
+.topnavbarconitL {
+    width: 85px;
+    font-weight: bold;
+    font-size: 17px;
+    color: #4d4d4d;
+    height: 40px;
+    line-height: 40px;
+    margin-right: 30px;
+    min-width: 85px;
+}
+.topnavbarconitR {
+    flex: 1;
+    font-weight: 500;
+    font-size: 15px;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.topnavbarconitRit {
+    margin-bottom: 10px;
+    height: 40px;
+    padding: 0 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    cursor: pointer;
+}
+.topnavbarconitRitActive {
+    background: #0066eb;
+    color: #fff;
+    border-radius: 4px;
+}
+
 .ijaiorenwu {
     position: fixed;
     right: 0;
@@ -587,6 +658,8 @@ export default {
     margin-right: 30px;
     font-size: 17px;
     /* width: 90px !important;  */
+    width: 90px;
+    min-width: 90px;
 }
 .productbox >>> .el-divider--horizontal {
     margin: 0px;
diff --git a/src/page/homepage/tool/toolmarker.vue b/src/page/homepage/tool/toolmarker.vue
index a9209ec..efc2be7 100644
--- a/src/page/homepage/tool/toolmarker.vue
+++ b/src/page/homepage/tool/toolmarker.vue
@@ -1,308 +1,418 @@
 <template>
-    <div>
-        <img v-if="officialwebsite" style="width:100%;height:450px; object-fit: cover;" src="/assets/home/2@2x.png" alt="">
-        <div  :class="officialwebsite?'tytool':'notytool'">
-            <div style="display:flex">              
-                <div class="typetext">工具类型</div>
-                <el-tabs v-if="tooltypelist.length>0"  v-model="toolType" @tab-click="showDataTypeChage">
-                    <!-- dictValue dictLabel -->
-                    <el-tab-pane label="全部" name="''"></el-tab-pane>
-                    <el-tab-pane v-for="(item,key) of tooltypelist" :key="key" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
-                </el-tabs>
-            </div>
-            <el-divider></el-divider>
-            <div style="display:flex">              
-                <div class="typetext">交付方式</div>
-                <el-tabs v-if="paytypelist.length>0" v-model="deliverType" @tab-click="payTypeChage">
-                    <el-tab-pane label="全部" name="''"></el-tab-pane>
-                    <el-tab-pane v-for="(item,key) of paytypelist" :key="key" :label="item.dictLabel" :name="item.dictValue">     </el-tab-pane>
-                </el-tabs>
+    <div style="background: rgb(245, 246, 250);overflow:hidden">
+        <img
+            v-if="officialwebsite"
+            style="width: 100%; height: 450px; object-fit: cover"
+            src="/assets/home/2@2x.png"
+            alt=""
+        />
+
+        <div class="topnavbar">
+            <div class="topnavbarcon">
+                <div class="topnavbarconit">
+                    <div class="topnavbarconitL">工具类型：</div>
+                    <div class="topnavbarconitR">
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: !typeName }"
+                            @click="toolTypeClick('')"
+                        >
+                            全部
+                        </div>
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: typeName == item.dictValue }"
+                            v-for="(item, key) of tooltypelist"
+                            :key="key"
+                            @click="toolTypeClick(item.dictValue)"
+                        >
+                            {{ item.dictLabel }}
+                        </div>
+                    </div>
+                </div>
+                <div class="topnavbarconit topnavbarconitno">
+                    <div class="topnavbarconitL">交付方式：</div>
+                    <div class="topnavbarconitR">
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: !deliverType }"
+                            @click="payTypeClick('')"
+                        >
+                            全部
+                        </div>
+                        <div
+                            class="topnavbarconitRit"
+                            :class="{ topnavbarconitRitActive: deliverType == item.dictValue }"
+                            v-for="(item, key) of paytypelist"
+                            :key="key"
+                            @click="payTypeClick(item.dictValue)"
+                        >
+                            {{ item.dictLabel }}
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div v-if='toolslist && toolslist.length>0' v-loading="loading">
-                <div v-for='(tool,key) of toolslist' :key="key" class="productbox" :style="{padding:officialwebsite?'':'10px 0 5px 18px'}" @click="toolsinform(tool.toolId)">
-                    <div style="width:150px;display:flex;align-items:center;">
-                        <img :src="tool.img" style="width:119px;height:119px;" alt="">
-                        <!-- <img v-if="tool.name=='代码静态分析工具'" src="/assets/toolmarket/EagleEye.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='源代码安全检测工具'" src="/assets/toolmarket/wukong.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='C/C++单元测试工具'" src="/assets/toolmarket/EagleWing-C.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='接口测试工具'" src="/assets/toolmarket/Kinterface.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='JAVA单元测试工具'" src="/assets/toolmarket/EagleWing-Java.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='功能测试工具AutoFun'" src="/assets/toolmarket/AutoFun.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='代码组成分析平台'" src="/assets/toolmarket/KeySwan.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='性能测试工具'" src="/assets/toolmarket/KeySphere.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='自鉴-交互式应用安全测试系统IAST'" src="/assets/toolmarket/自鉴交互式.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='Web应用安全测试工具'" src="/assets/toolmarket/web.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='资产识别及漏洞管理工具'" src="/assets/toolmarket/资产识别.png" style="width:119px;object-fit:contain" alt="">
-                        <img v-if="tool.name=='性能测试工具KeyTurbo'" src="/assets/toolmarket/AutoLoad.jpg" style="width:119px;object-fit:contain" alt=""> -->
+        </div>
+
+        <div :class="officialwebsite ? 'tytool' : 'notytool'">
+            <div v-if="toolslist && toolslist.length > 0" v-loading="loading">
+                <div
+                    v-for="(tool, key) of toolslist"
+                    :key="key"
+                    class="productbox"
+                    :style="{ padding: officialwebsite ? '' : '10px 0 5px 18px' }"
+                    @click="toolsinform(tool.toolId)"
+                >
+                    <div style="width: 150px; display: flex; align-items: center">
+                        <img :src="tool.img" style="width: 119px; height: 119px" alt="" />
                     </div>
-                    <div style="width: 100%;padding: 0 20px;" >
-                        <div style="display:flex;justify-content:space-between;" class="raise">   
-                            <p>{{tool.name}}</p>
-                            <p v-if="tool.price == 0" style="font-weight: bold; color:#E93A3A;">
-                                限时免费
-                            </p>
+                    <div style="width: 100%; padding: 0 20px">
+                        <div style="display: flex; justify-content: space-between" class="raise">
+                            <p>{{ tool.name }}</p>
+                            <p v-if="tool.price == 0" style="font-weight: bold; color: #e93a3a">限时免费</p>
                             <p v-else style="font-weight: bold">
-                                <span style="color:#E93A3A;">￥ {{tool.price}} </span>
+                                <span style="color: #e93a3a">￥ {{ tool.price }} </span>
                                 <span>/月</span>
                             </p>
                         </div>
                         <el-divider></el-divider>
-                        <p  :title="tool.toolDesc"
-                            style="font-size:14px;margin-bottom:5px;line-height:1.8">{{tool.toolDesc | ellipsis}}</p>
-                        <div class="cetype">   
-                            <p>工具类型：{{tool.toolTypeName}} </p>
-                            <p>交付方式：{{tool.deliverType}}</p>
-                            <p>上架时间： {{tool.onlineTime}}</p>
-                            <p>服务商：{{tool.providerName}}</p>
+                        <p :title="tool.toolDesc" style="font-size: 14px; margin-bottom: 5px; line-height: 1.8">
+                            {{ tool.toolDesc | ellipsis }}
+                        </p>
+                        <div class="cetype">
+                            <p>工具类型：{{ tool.toolTypeName }}</p>
+                            <p>交付方式：{{ tool.deliverType }}</p>
+                            <p>上架时间： {{ tool.onlineTime }}</p>
+                            <p>服务商：{{ tool.providerName }}</p>
                         </div>
                     </div>
                 </div>
-               
             </div>
-            <div v-else>   
-                <el-empty ></el-empty>
+            <div v-else>
+                <el-empty></el-empty>
             </div>
-            <div  v-if="officialwebsite && total>10" style='width:100%;margin-top:30px;text-align: center;'>
-                <el-pagination background
+            <div v-if="officialwebsite && total > 10" style="width: 100%; margin-top: 30px; text-align: center">
+                <el-pagination
+                    background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[10, 20, 30]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
-                    :total="total">
+                    :total="total"
+                >
                 </el-pagination>
             </div>
             <!--  :page-sizes="[3, 6, 30]" sizes,-->
-            <div v-if="!officialwebsite && total>3" style='width:100%;margin-top:30px;text-align: center;'>
-                <el-pagination background
+            <div v-if="!officialwebsite && total > 3" style="width: 100%; margin-top: 30px; text-align: center">
+                <el-pagination
+                    background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
-                    :current-page="currentPage"              
+                    :current-page="currentPage"
                     :page-size="pageSize"
                     layout="total,  prev, pager, next, jumper"
-                    :total="total">
+                    :total="total"
+                >
                 </el-pagination>
             </div>
         </div>
     </div>
 </template>
 <script>
-    import {mapGetters} from "vuex";
-    import {listTools} from "@/api/toolInfo/market";
-    export default{
-        data(){
-            return{
-                loading:true,
-                toolType:null,//工具类型
-                deliverType:null,//支付方式
-                toolslist:[],//工具数组
-                currentPage:1,
-                total:'',
-                pageNum:1,
-                pageSize:20,
-                officialwebsite:true,//是否官网
+import { mapGetters } from 'vuex'
+import { listTools } from '@/api/toolInfo/market'
+export default {
+    data() {
+        return {
+            loading: true,
+            toolType: '', //工具类型
+            deliverType: '', //支付方式
+            toolslist: [], //工具数组
+            currentPage: 1,
+            total: '',
+            pageNum: 1,
+            pageSize: 20,
+            officialwebsite: true, //是否官网
 
-                imageList: ['EagleEye.png', 'wukong.png', 'EagleWing-C.png', 'Kinterface.png', 'EagleWing-Java.png', 'AutoFun.png'
-                , 'KeySwan.png', 'KeySphere.png', '自鉴交互式.png', 'web.png', '资产识别.png', 'AutoLoad.png'],
+            imageList: [
+                'EagleEye.png',
+                'wukong.png',
+                'EagleWing-C.png',
+                'Kinterface.png',
+                'EagleWing-Java.png',
+                'AutoFun.png',
+                'KeySwan.png',
+                'KeySphere.png',
+                '自鉴交互式.png',
+                'web.png',
+                '资产识别.png',
+                'AutoLoad.png',
+            ],
 
-                img0: 'EagleEye.png',
-                img1: '/assets/toolmarket/wukong.png',
-                img2: '/assets/toolmarket/EagleWing-C.png',
-                img3: '/assets/toolmarket/Kinterface.png',
-                img4: '/assets/toolmarket/EagleWing-Java.png',
-                img5: '/assets/toolmarket/AutoFun.png',
-                img6: '/assets/toolmarket/KeySwan.png',
-                img7: '/assets/toolmarket/KeySphere.png',
-                img8: '/assets/toolmarket/自鉴交互式.png',
-                img9: '/assets/toolmarket/web.png',
-                img10: '/assets/toolmarket/资产识别.png',
-                img11: '/assets/toolmarket/AutoLoad.png',
+            img0: 'EagleEye.png',
+            img1: '/assets/toolmarket/wukong.png',
+            img2: '/assets/toolmarket/EagleWing-C.png',
+            img3: '/assets/toolmarket/Kinterface.png',
+            img4: '/assets/toolmarket/EagleWing-Java.png',
+            img5: '/assets/toolmarket/AutoFun.png',
+            img6: '/assets/toolmarket/KeySwan.png',
+            img7: '/assets/toolmarket/KeySphere.png',
+            img8: '/assets/toolmarket/自鉴交互式.png',
+            img9: '/assets/toolmarket/web.png',
+            img10: '/assets/toolmarket/资产识别.png',
+            img11: '/assets/toolmarket/AutoLoad.png',
+        }
+    },
+    computed: {
+        ...mapGetters(['paytypelist', 'tooltypelist']),
+    },
+    filters: {
+        ellipsis(value) {
+            if (!value) return ''
+            if (value.length > 100) {
+                return value.slice(0, 100) + '...'
             }
+            return value
         },
-        computed: {
-            ...mapGetters(['paytypelist','tooltypelist'])
+    },
+    mounted() {
+        // console.log('路由',this.$route.path);
+        let currentrout = this.$route.path
+        if (currentrout !== '/market') {
+            this.officialwebsite = false
+            this.pageSize = 3
+        }
+        // console.log('toolType----',this.tooltypelist,this.deliverType)
+        this.getList()
+    },
+    methods: {
+        toolTypeClick(val) {
+            this.typeName = val
+            this.getList()
         },
-        filters: {
-            ellipsis(value) {
-                if (!value) return ''
-                if (value.length > 100) {
-                    return value.slice(0, 100) + '...'
-                }
-                return value
-            }
+        payTypeClick(val) {
+            this.deliverType = val
+            this.getList()
         },
-        mounted(){
-            // console.log('路由',this.$route.path);  
-            let currentrout=this.$route.path;
-            if(currentrout!=='/market'){
-                this.officialwebsite=false;
-                this.pageSize=3
+        /** 查询列表 */
+        getList() {
+            this.loading = true
+            // console.log('toolType----'.this.toolType)
+            let data = {
+                toolType: this.toolType,
+                deliverType: this.deliverType,
+                pageNum: this.pageNum,
+                pageSize: this.pageSize,
+                status: 1,
             }
-            // console.log('toolType----',this.tooltypelist,this.deliverType)
-            this.getList()      
-        },
-        methods:{
-            /** 查询列表 */
-            getList() {
-                this.loading = true;
-                // console.log('toolType----'.this.toolType)
-                let data={
-                     toolType:this.toolType,
-                     deliverType:this.deliverType,
-                     pageNum:this.pageNum,
-                     pageSize:this.pageSize,
-                     status: 1
-                };
-                Object.keys(data).forEach(keyd=>{
-                    if(!data[keyd] || data[keyd]=='' || data[keyd]=='0' || data[keyd]=="''") { delete data[keyd]; }
-                    // console.log('data处理后----',data)
-                })
-                // console.log('data----',data)
-                listTools(data).then(response => {
+            Object.keys(data).forEach((keyd) => {
+                if (!data[keyd] || data[keyd] == '' || data[keyd] == '0' || data[keyd] == "''") {
+                    delete data[keyd]
+                }
+                // console.log('data处理后----',data)
+            })
+            // console.log('data----',data)
+            listTools(data)
+                .then((response) => {
                     // console.log('response----',response)
-                    this.toolslist = response.rows;
-                    this.total = response.total;
-                    this.loading = false;
-                }).catch(err=>{
-                    console.log('异常',err)
+                    this.toolslist = response.rows
+                    this.total = response.total
+                    this.loading = false
                 })
-            },
-            //工具方式
-            showDataTypeChage(){
-                // console.log('工具',this.toolType,this.deliverType)
-                this.getList()      
-            },
-            //支付方式
-            payTypeChage(){
-                // console.log('支付',this.toolType,this.deliverType)
-                this.getList()      
-            },
-            //工具详情
-            toolsinform(id){
-                // this.$message({
-                //     message: '即将上线，敬请期待',
-                //     type: 'info',
-                //     duration: 1000,
-                // })
-                if(this.officialwebsite){
-                    this.$router.push(`./market/tooldetails?id=${id}`)
-                }else{
-                    this.$router.push(`/console/mytooldetails?id=${id}`)
-                }
-            },
-            //分页
-            handleSizeChange(val) {
-                // console.log(`每页 ${val} 条`);
-                 this.pageSize=val;
-                this.getList();
-            },
-            //当前页码
-            handleCurrentChange(val) {
-                // console.log(`当前页: ${val}`);
-                this.pageNum=val;
-                this.getList();
+                .catch((err) => {
+                    console.log('异常', err)
+                })
+        },
+        //工具方式
+        showDataTypeChage() {
+            // console.log('工具',this.toolType,this.deliverType)
+            this.getList()
+        },
+        //支付方式
+        payTypeChage() {
+            // console.log('支付',this.toolType,this.deliverType)
+            this.getList()
+        },
+        //工具详情
+        toolsinform(id) {
+            // this.$message({
+            //     message: '即将上线，敬请期待',
+            //     type: 'info',
+            //     duration: 1000,
+            // })
+            if (this.officialwebsite) {
+                this.$router.push(`./market/tooldetails?id=${id}`)
+            } else {
+                this.$router.push(`/console/mytooldetails?id=${id}`)
             }
         },
-
-    }
+        //分页
+        handleSizeChange(val) {
+            // console.log(`每页 ${val} 条`);
+            this.pageSize = val
+            this.getList()
+        },
+        //当前页码
+        handleCurrentChange(val) {
+            // console.log(`当前页: ${val}`);
+            this.pageNum = val
+            this.getList()
+        },
+    },
+}
 </script>
 <style scoped>
-    .tytool{
-        width:1200px;
-        margin:30px auto;
-    }
-    .notytool{
-        /* width:1200px; */
-        /* margin-left:30px; */
-    }
-    .tytool>>>.el-tabs__item.is-top:last-child {
-        padding-right: 20px;
-    }
-    .notytool>>>.el-tabs__item.is-top:last-child {
-        padding-right: 20px;
-    }
-    .el-tabs>>>.el-tabs__nav-wrap::after{
-        background-color:transparent;
-    }
-    .el-tabs>>>.el-tabs__item{
-        color: #4D4D4D;
-    }
-    .el-tabs>>>.el-tabs__active-bar{
-        background-color:transparent;
-    }
-    .el-tabs>>>.el-tabs__item.is-active{
-        background:#0066EB;
-        color:#fff;
-        border:none;
-        border-radius: 4px;
-    }
-    .tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
-        padding-left:22px;
-    }
-    .tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) {
-        padding-right:18px;
+.topnavbar {
+    width: 100%;
+    padding: 10px 0;
+    background: #fff;
+    box-sizing: border-box;
+    margin-top: -3px;
+    box-shadow: 0px 4px 11px 1px rgba(20, 77, 150, 0.1);
+}
+.topnavbarcon {
+    width: 1200px;
+    margin: auto;
+}
+.topnavbarconit {
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid #dcdfe6;
+}
+.topnavbarconitno {
+     border-bottom: unset;
+}
+.topnavbarconitL {
+    width: 85px;
+    font-weight: bold;
+    font-size: 17px;
+    color: #4d4d4d;
+    height: 40px;
+    line-height: 40px;
+    margin-right: 30px;
+    min-width: 85px;
+}
+.topnavbarconitR {
+    flex: 1;
+    font-weight: 500;
+    font-size: 15px;
+    color: #333333;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.topnavbarconitRit {
+    margin-bottom: 10px;
+    height: 40px;
+    padding: 0 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    cursor: pointer;
+}
+.topnavbarconitRitActive {
+    background: #0066eb;
+    color: #fff;
+    border-radius: 4px;
+}
+.tytool {
+    width: 1200px;
+    margin: 30px auto;
+}
+.notytool {
+    /* width:1200px; */
+    /* margin-left:30px; */
+}
+.tytool >>> .el-tabs__item.is-top:last-child {
+    padding-right: 20px;
+}
+.notytool >>> .el-tabs__item.is-top:last-child {
+    padding-right: 20px;
+}
+.el-tabs >>> .el-tabs__nav-wrap::after {
+    background-color: transparent;
+}
+.el-tabs >>> .el-tabs__item {
+    color: #4d4d4d;
+}
+.el-tabs >>> .el-tabs__active-bar {
+    background-color: transparent;
+}
+.el-tabs >>> .el-tabs__item.is-active {
+    background: #0066eb;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+}
+.tytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 22px;
+}
+.tytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) {
+    padding-right: 18px;
+}
+.tytool >>> .el-divider--horizontal {
+    margin: 5px 0 15px 0;
+}
+.notytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 22px;
+}
+.notytool >>> .el-tabs--top .el-tabs__item.is-top:nth-child(6) {
+    padding-right: 18px;
+}
+.notytool >>> .el-divider--horizontal {
+    margin: -5px 0 5px 0;
+}
+.typetext {
+    color: #4d4d4d;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    margin-right: 20px;
+    font-size: 17px;
+}
+.productbox >>> .el-divider--horizontal {
+    margin: 0px;
+}
+.cetype {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+.productbox {
+    /* width: 1200px; */
+    /* height: 110px; */
+    background: #ffffff;
+    box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
+    border-radius: 4px;
+    padding: 25px 0 10px 18px;
+    display: flex;
+    margin-bottom: 30px;
+    cursor: pointer;
+    transition: all 0.1s linear;
+}
+.cetype p {
+    /* width:200px; */
+    font-size: 14px;
+    margin: 10px 0;
+}
+.raise :nth-child(1) {
+    font-weight: bold;
+}
+.productbox:hover .raise p:nth-child(1) {
+    color: #0066eb;
+}
+.productbox:hover {
+    transform: scale(1.01);
+    box-shadow: 0px 2px 8px 0px #87898d;
+}
+@media screen and (max-width: 1500px) {
+    .productbox {
+        width: 1100px;
+        padding: 25px 20px 10px 18px !important;
     }
-    .tytool>>>.el-divider--horizontal{
-        margin:5px 0 15px 0
-    }
-    .notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
-        padding-left:22px;
-    }
-    .notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) {
-        padding-right:18px;
-    }
-    .notytool>>>.el-divider--horizontal{
-        margin:-5px 0 5px 0
-    }
-    .typetext{
-        color: #4D4D4D;
-        font-weight: bold;
-        height:40px;
-        line-height:40px;
-        margin-right:20px;
-        font-size:17px;
-    }
-    .productbox>>>.el-divider--horizontal{
-        margin:0px
-    }
-    .cetype{
-        display:flex;
-        justify-content:space-between;
-        flex-wrap:wrap
-    }
-    .productbox{
-        /* width: 1200px; */
-        /* height: 110px; */
-        background: #FFFFFF;
-        box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
-        border-radius: 4px;
-        padding:25px 0 10px 18px;
-        display:flex;
-        margin-bottom:30px;
-        cursor:pointer;
-        transition: all .1s linear;
-    }
-    .cetype p{
-        /* width:200px; */
-        font-size:14px;
-        margin:10px 0
-    }
-    .raise :nth-child(1){
-        font-weight: bold;
-    }
-    .productbox:hover .raise p:nth-child(1){
-        color:#0066EB
-    }
-    .productbox:hover{
-          transform: scale(1.01);
-          box-shadow: 0px 2px 8px 0px #87898d;
-     }
-     @media screen and (max-width: 1500px){
-        .productbox{
-            width:1100px;
-            padding:25px 20px 10px 18px!important
-        }
-
-     }
+}
 </style>
\ No newline at end of file