ui设计

src/views/hosts/hostsList.vue

@@ -9,13 +9,22 @@
         <el-date-picker v-model="searchForm.time" type="date" value-format="YYYYMMDD" placeholder="选择查询时间" size="large"
           style="margin-left: 50px;" />
 
-        <el-button style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
+        <el-button class="serch-button" style="margin-left: 50px;" type="primary" @click="serch">查询</el-button>
       </div>
 
       <div class="hostTable center-justify">
-        <el-table size="small" :data="tableData" stripe>
-          <el-table-column prop="hostId" label="主播id" width="200" />
-          <el-table-column prop="hostName" label="主播名字" min-width="200" />
+        <el-table size="small" :data="tableData" stripe v-loading="loading">
+          <el-table-column prop="hostId" label="主播id" width="200">
+            <template #default="scope">
+              <div class="hostIdText" @click="openHTML(scope.row.hostId)"> {{ scope.row.hostId }}</div>
+
+            </template>
+          </el-table-column>
+          <el-table-column prop="hostName" label="主播名字" min-width="200">
+            <template #default="scope">
+              {{ scope.row.hostName }}
+            </template>
+          </el-table-column>
 
           <el-table-column v-for="label in labelList" :key="label.paramCode" :prop="label.paramCode"
             :label="label.paramCodeMeaning" width="120">
@@ -27,8 +36,8 @@
                     :title="label.paramCodeMeaning" :id="scope.row.hostId" :dataType="label.paramCode"></component>
                 </div>
                 <template #reference>
-                  <span @mouseover="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = true"
-                    @mouseout="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = false">
+                  <span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
+                    @mouseout="closePopover(scope.row.hostId, label.paramCode)">
                     {{ scope.row[label.paramCode] }}
                   </span>
                 </template>
@@ -41,7 +50,8 @@
                 </div>
                 <template #reference>
                   <!-- 鼠标移入时开启 -->
-                  <span @mouseover="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = true">
+                  <span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
+                    @mouseout="closePopover(scope.row.hostId, label.paramCode)">
                     {{ scope.row[label.paramCode] }}
                   </span>
                 </template>
@@ -49,13 +59,13 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="操作">
+          <!-- <el-table-column label="操作">
             <template #default="scope">
               <div style="display: flex; align-items: center">
                 <el-button type="primary" @click="getTkhostdetail(scope.row.hostId)">查看</el-button>
               </div>
             </template>
-          </el-table-column>
+          </el-table-column> -->
         </el-table>
       </div>
       <div class="center-justify" style="margin-top: 30px;">
@@ -67,11 +77,15 @@
 </template>
 
 <script setup>
-import { getToken, setToken, removeToken } from '@/utils/storage'
+// import { getToken, setToken, removeToken } from '@/utils/storage'
 import { tkhostdata, dicts, tkhostdetail } from '@/api/account';
+import { usePythonBridge, } from '@/utils/pythonBridge'
 import { ref, reactive, onMounted } from 'vue';
 import EChartsComponent from '@/components/EChartsComponent.vue';
 
+const loading = ref(false)
+//py方法
+const { givePyAnchorId } = usePythonBridge();
 
 let labelList = ref([])
 const tableData = ref([])
@@ -117,18 +131,19 @@ function serch() {
   console.log("page.value", page.value)
   console.log("searchForm.value.country", searchForm.value.country)
   console.log("time.value", searchForm.value.time)
-  getdictionary();
   getlist();
 }
 
 //获取主播列表
 const getlist = () => {
+  loading.value = true
   tkhostdata({
     searchTime: searchForm.value.time,
     region: searchForm.value.country,
     pageSize: pageSize.value,
     page: page.value
   }).then(res => {
+    loading.value = false
     total.value = res.total
     tableData.value = []
     res.records.forEach(item => {
@@ -170,6 +185,24 @@ const getTkhostdetail = (id) => {
 
 }
 
+
+function openPopover(hostId, paramCode) {
+
+  isPopoverVisible[`${hostId}-${paramCode}`] = true;
+
+
+}
+
+function closePopover(hostId, paramCode) {
+
+  // isPopoverVisible[`${hostId}-${paramCode}`] = false;
+}
+
+
+function openHTML(id) {
+  givePyAnchorId(id)
+
+}
 </script>
 
 <style lang="less">
@@ -182,6 +215,19 @@ const getTkhostdetail = (id) => {
   .hostTable {
     width: 100%;
     padding: 40px 0;
+
+    .hostIdText {
+      text-decoration: underline;
+      cursor: pointer;
+      color: #0f0092;
+    }
+  }
+
+  .serch-button {
+    width: 80px;
+    height: 47px;
+    background: #E7CA92;
+    border-radius: 10px;
   }
 }
 
@@ -209,4 +255,22 @@ const getTkhostdetail = (id) => {
   justify-content: center;
   align-items: center;
 }
+</style>
+
+<style scoped>
+::v-deep(.el-input__wrapper) {
+  background-color: #F2FAF9;
+  border: 1px solid #B7CEC5;
+  height: 48px;
+}
+
+::v-deep(.el-select__wrapper) {
+  background-color: #F2FAF9;
+  border: 1px solid #B7CEC5;
+  height: 48px;
+}
+
+::v-deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #338F6A;
+}
 </style>