ui设计

public/index.html

@@ -24,6 +24,8 @@
   body {
     margin: 0;
     padding: 0;
+    width: 1600px;
+    height: 900px;
   }
 </style>
 

src/components/EChartsComponent.vue

@@ -23,12 +23,24 @@ export default {
         }
 
     },
+    data() {
+        return {
+            seriesData: [],
+            num: 0
+        }
+    },
     mounted() {
-        this.initChart();
+
+
         this.getTkhostdetail();
+
     },
     methods: {
         initChart() {
+            if (!this.$refs.chart) {
+                console.error('DOM element not found');
+                return;
+            }
             const myChart = echarts.init(this.$refs.chart);
             const option = {
                 title: {
@@ -36,17 +48,17 @@ export default {
                 },
                 tooltip: {},
                 legend: {
-                    data: ['销量']
+                    data: [this.title]
                 },
                 xAxis: {
-                    data: ['2025-03-29', '2025-03-30', '2025-03-31', '2025-04-01', '2025-04-02', '2025-04-03']
+                    data: [this.getCurrentDate()[0].slice(4), this.getCurrentDate()[1].slice(4), this.getCurrentDate()[2].slice(4), this.getCurrentDate()[3].slice(4), this.getCurrentDate()[4].slice(4), this.getCurrentDate()[5].slice(4), this.getCurrentDate()[6].slice(4)]
                 },
                 yAxis: {},
                 series: [
                     {
-                        name: '金币数',
+                        name: this.title,
                         type: 'line',
-                        data: [23266, 12144, 44467, 86686, 35637, 34534],
+                        data: [this.seriesData[0], this.seriesData[1], this.seriesData[2], this.seriesData[3], this.seriesData[4], this.seriesData[5], this.seriesData[6]],
                         smooth: true
 
                     }
@@ -61,7 +73,33 @@ export default {
                 searchTimeStart: this.getCurrentDate()[0],
                 searchTimeEnd: this.getCurrentDate()[6]
             }).then(res => {
-                res[0]
+                // console.log("返回数据", res[0][this.getCurrentDate()[2]])
+                //echarts 数据初始化
+                this.seriesData = [
+                    res[0][this.getCurrentDate()[0]] == null ? 0 : Number(res[0][this.getCurrentDate()[0]][this.dataType]),
+                    res[0][this.getCurrentDate()[1]] == null ? 0 : Number(res[0][this.getCurrentDate()[1]][this.dataType]),
+                    res[0][this.getCurrentDate()[2]] == null ? 0 : Number(res[0][this.getCurrentDate()[2]][this.dataType]),
+                    res[0][this.getCurrentDate()[3]] == null ? 0 : Number(res[0][this.getCurrentDate()[3]][this.dataType]),
+                    res[0][this.getCurrentDate()[4]] == null ? 0 : Number(res[0][this.getCurrentDate()[4]][this.dataType]),
+                    res[0][this.getCurrentDate()[5]] == null ? 0 : Number(res[0][this.getCurrentDate()[5]][this.dataType]),
+                    res[0][this.getCurrentDate()[6]] == null ? 0 : Number(res[0][this.getCurrentDate()[6]][this.dataType]),
+                ]
+
+                // this.seriesData = {
+                //     [this.getCurrentDate()[0]]: res[0][this.getCurrentDate()[0]] == null ? 0 : res[0][this.getCurrentDate()[0]][this.dataType],
+                //     [this.getCurrentDate()[1]]: res[0][this.getCurrentDate()[1]] == null ? 0 : res[0][this.getCurrentDate()[1]][this.dataType],
+                //     [this.getCurrentDate()[2]]: res[0][this.getCurrentDate()[2]] == null ? 0 : res[0][this.getCurrentDate()[2]][this.dataType],
+                //     [this.getCurrentDate()[3]]: res[0][this.getCurrentDate()[3]] == null ? 0 : res[0][this.getCurrentDate()[3]][this.dataType],
+                //     [this.getCurrentDate()[4]]: res[0][this.getCurrentDate()[4]] == null ? 0 : res[0][this.getCurrentDate()[4]][this.dataType],
+                //     [this.getCurrentDate()[5]]: res[0][this.getCurrentDate()[5]] == null ? 0 : res[0][this.getCurrentDate()[5]][this.dataType],
+                //     [this.getCurrentDate()[6]]: res[0][this.getCurrentDate()[6]] == null ? 0 : res[0][this.getCurrentDate()[6]][this.dataType],
+                // }
+
+                this.initChart();
+                this.num++
+                console.log("返回数据", this.seriesData)
+                console.log("返回数据", this.num)
+
 
             })
         },

src/components/Sidebar.vue

@@ -1,48 +1,120 @@
 <template>
   <div class="sidebar">
-    <h3>导航菜单</h3>
+    <div class="logo">
+      <img style="margin-right: 10px;" src="@/assets/logo.png">
+      <img src="@/assets/logotext.png">
+    </div>
     <ul>
-      <li>
+      <li @click="activeIndex = 1">
-        <RouterLink to="/workBenches">工作台</RouterLink>
+        <RouterLink to="/workBenches">
+          <img v-if="activeIndex == 1" src="@/assets/navAction.png" autoplay loop muted class="background-img">
+          <div style="display: flex;">
+            <img v-if="activeIndex == 1" src="@/assets/workAction.png" style="margin-right: 10px;">
+            <img v-else src="@/assets/workAction.png" style="margin-right: 10px;">
+            <div :style="activeIndex == 1 ? 'color: #000' : 'color: #fff'" class="center-justify">工作台</div>
+
+          </div>
+        </RouterLink>
       </li>
-      <li>
+      <li @click="activeIndex = 2">
-        <RouterLink to="/hostsList">主播列表</RouterLink>
+        <RouterLink to="/hostsList">
+          <img v-if="activeIndex == 2" src="@/assets/navAction.png" autoplay loop muted class="background-img">
+
+          <div style="display: flex;">
+            <img v-if="activeIndex == 2" src="@/assets/listAction.png" style="margin-right: 10px;">
+            <img v-else src="@/assets/listAction.png" style="margin-right: 10px;">
+            <div :style="activeIndex == 2 ? 'color: #000' : 'color: #fff'" class="center-justify">主播列表</div>
+
+          </div>
+        </RouterLink>
       </li>
     </ul>
   </div>
 </template>
 
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+
+let activeIndex = ref(1);
+</script>
+
 <style scoped>
 .sidebar {
   position: fixed;
   left: 0;
   top: 0;
-  height: 100vh;
+  height: 900px;
-  width: 200px;
+  width: 280px;
-  background-color: #f5f5f5;
+  background-color: #338F6A;
   padding: 20px;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
+
+  .logo {
+    border-bottom: 1px solid #fff;
+    padding-bottom: 29px;
+
+    img:nth-of-type(1) {
+      height: 40px;
+    }
+
+    img:nth-of-type(2) {
+      height: 29px;
+    }
+  }
 }
 
 .sidebar ul {
   list-style: none;
   padding: 0;
+
 }
 
 .sidebar li {
-  margin-bottom: 10px;
+  margin-top: 50px;
+  padding-top: 30px;
+  padding-left: 30px;
+  margin-bottom: 50px;
+  height: 64px;
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
 }
 
 .sidebar a {
   text-decoration: none;
-  color: #333;
+  color: #000000;
   display: block;
   padding: 8px;
   border-radius: 4px;
+
+  font-family: Source Han Sans SC;
+  font-weight: 400;
+  font-size: 22px;
+
 }
 
-.sidebar a:hover {
+/* .sidebar a:hover {
   background-color: #e0e0e0;
+} */
+
+
+.background-img {
+  position: absolute;
+  top: 0;
+  left: 13px;
+  width: 247px;
+  height: 126px;
+  object-fit: cover;
+  z-index: -1;
+  /* 确保视频在内容之下 */
+}
+
+.center-justify {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
 </style>

src/utils/axios.js

@@ -14,7 +14,8 @@ let baseURL = ''
 console.log(process.env.NODE_ENV)
 if (process.env.NODE_ENV === 'development') {
     // 生产环境
-    baseURL = "http://192.168.0.119:8080/api/"
+    baseURL = "http://120.26.251.180:8085/api/"
+    // baseURL = "http://192.168.0.100:8085/api/"
 } else {
     // 开发环境
     baseURL = ""
@@ -115,8 +116,12 @@ export function postAxios({ url, data }) {
             if (err.message == "Network Error") {
                 // alert("网络错误，请检查网络连接")
                 ElMessage.error('网络连接错误');
+                reject('网络连接错误')
+
             } else {
                 ElMessage.error(err.message);
+                reject(err.message)
+
             }
             // console.log(err)
             // reject(err)

src/utils/countryUtil.js

@@ -0,0 +1,261 @@
+// country-utils.js
+export const CountryCode = {
+    AD: "安道尔",
+    AE: "阿拉伯联合酋长国",
+    AF: "阿富汗",
+    AG: "安提瓜和巴布达",
+    AI: "安圭拉",
+    AL: "阿尔巴尼亚",
+    AM: "亚美尼亚",
+    AO: "安哥拉",
+    AQ: "南极洲",
+    AR: "阿根廷",
+    AS: "美属萨摩亚",
+    AT: "奥地利",
+    AU: "澳大利亚",
+    AU1: "澳大利亚",
+    AW: "阿鲁巴",
+    AX: "奥兰群岛",
+    AZ: "阿塞拜疆",
+    BA: "波斯尼亚和黑塞哥维那",
+    BB: "巴巴多斯",
+    BD: "孟加拉国",
+    BE: "比利时",
+    BF: "布基纳法索",
+    BG: "保加利亚",
+    BH: "巴林",
+    BI: "布隆迪",
+    BJ: "贝宁",
+    BL: "圣巴泰勒米",
+    BM: "百慕大群岛",
+    BN: "文莱达鲁萨兰国",
+    BO: "玻利维亚",
+    BQ: "博奈尔、圣尤斯特歇斯和萨巴",
+    BR: "巴西",
+    BS: "巴哈马",
+    BT: "不丹",
+    BV: "布韦岛",
+    BW: "博茨瓦纳",
+    BY: "白俄罗斯",
+    BZ: "伯利兹",
+    CA: "加拿大",
+    CA1: "加拿大",
+    CC: "科科斯（基林）群岛",
+    CD: "刚果民主共和国",
+    CF: "中非共和国",
+    CG: "刚果共和国",
+    CH: "瑞士",
+    CI: "科特迪瓦",
+    CK: "库克群岛",
+    CL: "智利",
+    CM: "喀麦隆",
+    CN: "中国",
+    CO: "哥伦比亚",
+    CR: "哥斯达黎加",
+    CU: "古巴",
+    CV: "佛得角",
+    CW: "库拉索",
+    CX: "圣诞岛",
+    CY: "塞浦路斯",
+    CZ: "捷克共和国",
+    DE: "德国",
+    DG: "迪戈加西亚岛",
+    DJ: "吉布提",
+    DK: "丹麦",
+    DM: "多米尼克",
+    DO: "多米尼加共和国",
+    DZ: "阿尔及利亚",
+    EC: "厄瓜多尔",
+    EE: "爱沙尼亚",
+    EG: "埃及",
+    EH: "西撒哈拉",
+    ER: "厄立特里亚",
+    ES: "西班牙",
+    ET: "埃塞俄比亚",
+    FI: "芬兰",
+    FJ: "斐济",
+    FK: "福克兰群岛",
+    FM: "密克罗尼西亚",
+    FO: "法罗群岛",
+    FR: "法国",
+    GA: "加蓬",
+    GB: "英国",
+    GD: "格林纳达",
+    GE: "格鲁吉亚",
+    GF: "法属圭亚那",
+    GG: "根西岛",
+    GH: "加纳",
+    GI: "直布罗陀",
+    GL: "格陵兰",
+    GM: "冈比亚",
+    GN: "几内亚",
+    GP: "瓜德罗普",
+    GQ: "赤道几内亚",
+    GR: "希腊",
+    GS: "南乔治亚和南桑德威奇群岛",
+    GT: "危地马拉",
+    GU: "关岛",
+    GW: "几内亚比绍",
+    GY: "圭亚那",
+    HK: "中国香港特别行政区",
+    HM: "赫德岛和麦克唐纳群岛",
+    HN: "洪都拉斯",
+    HR: "克罗地亚",
+    HT: "海地",
+    HU: "匈牙利",
+    ID: "印度尼西亚",
+    IE: "爱尔兰",
+    IL: "以色列",
+    IM: "马恩岛",
+    IN: "印度",
+    IO: "英属印度洋领地",
+    IQ: "伊拉克",
+    IR: "伊朗",
+    IS: "冰岛",
+    IT: "意大利",
+    JE: "泽西岛",
+    JM: "牙买加",
+    JO: "约旦",
+    JP: "日本",
+    JP1: "日本",
+    KE: "肯尼亚",
+    KG: "吉尔吉斯斯坦",
+    KH: "柬埔寨",
+    KI: "基里巴斯",
+    KM: "科摩罗",
+    KN: "圣基茨和尼维斯",
+    KP: "朝鲜",
+    KR: "韩国",
+    KR1: "韩国",
+    KR1_UXWAUDIT: "韩国",
+    KW: "科威特",
+    KY: "开曼群岛",
+    KZ: "哈萨克斯坦",
+    LA: "老挝",
+    LB: "黎巴嫩",
+    LC: "圣卢西亚",
+    LI: "列支敦士登",
+    LK: "斯里兰卡",
+    LR: "利比里亚",
+    LS: "莱索托",
+    LT: "立陶宛",
+    LU: "卢森堡",
+    LV: "拉脱维亚",
+    LY: "利比亚",
+    MA: "摩洛哥",
+    MC: "摩纳哥",
+    MD: "摩尔多瓦",
+    ME: "黑山",
+    MF: "圣马丁",
+    MG: "马达加斯加",
+    MH: "马绍尔群岛",
+    MK: "北马其顿",
+    ML: "马里",
+    MM: "缅甸",
+    MN: "蒙古",
+    MO: "中国澳门特别行政区",
+    MP: "北马里亚纳群岛",
+    MQ: "马提尼克",
+    MR: "毛里塔尼亚",
+    MS: "蒙特塞拉特",
+    MT: "马耳他",
+    MU: "毛里求斯",
+    MV: "马尔代夫",
+    MW: "马拉维",
+    MX: "墨西哥",
+    MY: "马来西亚",
+    MZ: "莫桑比克",
+    NA: "纳米比亚",
+    NC: "新喀里多尼亚",
+    NE: "尼日尔",
+    NF: "诺福克岛",
+    NG: "尼日利亚",
+    NI: "尼加拉瓜",
+    NL: "荷兰",
+    NO: "挪威",
+    NP: "尼泊尔",
+    NR: "瑙鲁",
+    NU: "纽埃",
+    NZ: "新西兰",
+    OM: "阿曼",
+    PA: "巴拿马",
+    PE: "秘鲁",
+    PF: "法属玻利尼西亚",
+    PG: "巴布亚新几内亚",
+    PH: "菲律宾",
+    PK: "巴基斯坦",
+    PL: "波兰",
+    PM: "圣皮埃尔和密克隆群岛",
+    PN: "皮特凯恩群岛",
+    PR: "波多黎各",
+    PS: "巴勒斯坦",
+    PT: "葡萄牙",
+    PW: "帕劳",
+    PY: "巴拉圭",
+    QA: "卡塔尔",
+    RE: "留尼汪",
+    RO: "罗马尼亚",
+    RS: "塞尔维亚",
+    RU: "俄罗斯",
+    RW: "卢旺达",
+    SA: "沙特阿拉伯",
+    SB: "索罗门群岛",
+    SC: "塞舌尔",
+    SD: "苏丹",
+    SE: "瑞典",
+    SG: "新加坡",
+    SI: "斯洛文尼亚",
+    SJ: "斯瓦尔巴和扬马延",
+    SK: "斯洛伐克",
+    SL: "塞拉利昂",
+    SM: "圣马利诺",
+    SN: "塞内加尔",
+    SO: "索马里",
+    SR: "苏里南",
+    SS: "南苏丹",
+    ST: "圣多美和普林西比",
+    SV: "萨尔瓦多",
+    SX: "荷属圣马丁",
+    SY: "叙利亚",
+    SZ: "斯威士兰",
+    TC: "特克斯和凯科斯群岛",
+    TD: "乍得",
+    TF: "法属南部领地",
+    TG: "多哥",
+    TH: "泰国",
+    TJ: "塔吉克斯坦",
+    TK: "托克劳群岛",
+    TL: "东帝汶",
+    TM: "土库曼斯坦",
+    TN: "突尼斯",
+    TO: "汤加",
+    TR: "土耳其",
+    TT: "特立尼达和多巴哥",
+    TV: "图瓦卢",
+    TW: "台湾",
+    TZ: "坦桑尼亚",
+    UA: "乌克兰",
+    UG: "乌干达",
+    UM: "美国本土外小岛屿",
+    US: "美国",
+    UY: "乌拉圭",
+    UZ: "乌兹别克斯坦",
+    VA: "梵蒂冈",
+    VC: "圣文森特",
+    VE: "委内瑞拉",
+    VG: "英属维尔京群岛",
+    VI: "美属维尔京群岛",
+    VN: "越南",
+    VN1: "越南",
+    VU: "瓦努阿图",
+    WS: "萨摩亚",
+    YE: "也门",
+    YT: "马约特岛",
+    ZA: "南非",
+    ZM: "赞比亚",
+    ZW: "津巴布韦"
+};
+
+export function getCountryName(code) {
+    return CountryCode[code] || null;
+}

src/utils/pythonBridge.js

@@ -14,31 +14,70 @@ export function usePythonBridge() {
   // 调用 Python 方法
   const fetchDataConfig = (data) => {
     return new Promise((resolve, reject) => {
-      if (!bridge.value) {
+      if (bridge.value) {
-        reject(new Error('返回出错，请检查是否已连接到 Python'));
+        bridge.value.fetchDataConfig(data, function (result) {
-        return;
+          resolve(result);
+        });
       }
 
-      bridge.value.fetchDataConfig(data, function (result) {
+
-        resolve(result);
-      });
     });
   };
 
-  // 从 Python 获取数据
+  // 查询获取主播的数据
-  const getPythonData = (data) => {
+  const fetchDataCount = () => {
+    return new Promise((resolve, reject) => {
+      if (bridge.value) {
+        bridge.value.fetchDataCount(function (result) {
+          resolve(result);
+        });
+      }
+    });
+  };
+
+  // 打开tk后台
+  const loginTikTok = () => {
     if (bridge.value) {
-      bridge.value.stringToJs(data, function (result) {
+      bridge.value.loginTikTok(function (result) {
-        alert(result);
+
+      });
+    }
+
+  };
+
+  // 登录tk后台
+  const loginBackStage = (data) => {
+    return new Promise((resolve, reject) => {
+      if (bridge.value) {
+        bridge.value.loginBackStage(data, function (result) {
+          if (result) {
+            resolve(result);
+          } else {
+            reject(result);
+          }
+
+        });
+      }
+    });
+  };
+
+  //跳转到主播页面
+  const givePyAnchorId = (id) => {
+
+    if (bridge.value) {
+      bridge.value.givePyAnchorId(id, function (result) {
+
       });
     }
   };
-
   // 在组件挂载时初始化桥接
   onMounted(initBridge);
 
   return {
     fetchDataConfig,
-    getPythonData
+    fetchDataCount,
+    loginBackStage,
+    loginTikTok,
+    givePyAnchorId
   };
 }

src/utils/storage.js

@@ -24,4 +24,11 @@ export function setNumData(numData) {
 }
 export function getNumData() {
 	return JSON.parse(localStorage.getItem('num'));
+}
+
+export function setUserPass(userdata) {
+	localStorage.setItem('userPass', JSON.stringify(userdata));
+}
+export function getUserPass() {
+	return JSON.parse(localStorage.getItem('userPass'));
 }

src/views/HomeView.vue

@@ -1,15 +1,13 @@
 <template>
 	<div class="main">
-		<!-- <button @click="callPython">设置数据"123"到 Python</button>
-    <button @click="getPythonData">从 Python 获取数据</button> -->
-		<!-- <input type="text" id="input" v-model="inputValue"></input>
-    <div id="output">{{ output }}</div> -->
-
 		<div class="container">
-			<div class="left">
-
-			</div>
 			<div class="right">
+				<!-- 视频背景 -->
+				<video autoplay loop muted class="background-video">
+					<source :src="require('@/assets/video/bg.mp4')" type="video/mp4">
+					您的浏览器不支持 HTML5 视频。
+				</video>
+
 				<!-- 设置 -->
 				<div class="center-align">
 					<div></div>
@@ -28,53 +26,45 @@
 						</div>
 					</div>
 				</div>
-
+				<div class="center-line" style="margin-top: 15vh;">
-				<!-- logo -->
+					<!-- logo -->
-				<div class="logo">
+					<div class="logo">
-					<div style="height: 80px; width: 300px; background-color: aqua;">
+						<div class="center-justify" style="height: 80px; width: 300px;">
-
+							<img style="margin-right: 20px;" src="@/assets/logo.png">
-					</div>
+							<img src="@/assets/logotext.png">
-				</div>
+						</div>
-
-				<!-- From -->
-				<div class="from">
-					<div class="from-title">
-						<div>账号登陆</div>
 					</div>
 
-					<div class="from-input">
+					<!-- From -->
-						<el-form label-position="left" label-width="100px" :model="formData">
+					<div class="from">
+						<div class="from-title center-justify">
+							<div>账号登陆</div>
+						</div>
 
-							<div class="from-input-item">
+						<div class="from-input">
-								<div class="from-input-item-title center-justify">
+							<el-form label-position="left" label-width="100px" :model="formData">
-									账号：
+
+								<div class="from-input-item1">
+									<img src="@/assets/password.png" alt="">
+									<el-input style="height: 25px;" v-model="formData.userId" placeholder="账号" clearable
+										@keyup.enter="onSubmit" />
 								</div>
-								<el-input style="height: 50px;" v-model="formData.userId" placeholder="请输入登录账号"
+								<div class="from-input-item1">
-									clearable />
+									<img src="@/assets/password.png" alt="">
-							</div>
+									<el-input style="height: 25px; " v-model="formData.password" type="password"
-
+										placeholder="密码" show-password @keyup.enter="onSubmit" />
-							<div class="from-input-item">
-								<div class="from-input-item-title center-justify">
-									密码：
 								</div>
-								<el-input style="height: 50px;" v-model="formData.password" type="password"
-									placeholder="请输入登录密码" show-password />
-							</div>
 
-							<div class="from-input-item">
+								<div class="from-input-item">
-								<el-button style="width: 100%; height: 40px;" type="primary"
+									<el-button class="loginButton" color="#8f7ee7" type="primary"
-									@click="onSubmit">登录</el-button>
+										@click="onSubmit">登录</el-button>
-							</div>
+								</div>
-
+							</el-form>
-
+						</div>
-						</el-form>
 					</div>
-
-
 				</div>
 			</div>
 		</div>
-
 	</div>
 </template>
 
@@ -82,65 +72,72 @@
 import { ref, reactive, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { login } from '@/api/account';
-import { getToken, setToken, setUser } from '@/utils/storage'
+import { getToken, setToken, setUser, setUserPass, getUserPass } from '@/utils/storage';
+import { ElLoading } from 'element-plus';
 
 const router = useRouter();
 
-// import { usePythonBridge } from '@/utils/pythonBridge';
-
-// let inputValue = ref('999');
-// const output = ref('');
-// const { callPython, getPythonData } = usePythonBridge();
-
-
-
 const formData = ref({
-	userId: '',
+	userId: getUserPass() == null ? '' : getUserPass().userId,
-	password: '',
+	password: getUserPass() == null ? '' : getUserPass().password,
-})
+});
-
 
 const onSubmit = () => {
-	console.log('submit!')
+	const loading = ElLoading.service({
+		lock: true,
+		text: 'Loading',
+		background: 'rgba(0, 0, 0, 0.7)',
+	});
+	console.log('submit!');
+	setUserPass(formData.value);
 	login({
 		userId: formData.value.userId,
 		password: formData.value.password,
-	}).then(res => {
+	}).then((res) => {
-		console.log(res)
+		loading.close();
-		setToken(res.currcode)
+		setToken(res.currcode);
-		setUser(res)
+		setUser(res);
 		router.push('/nav');
-
+	}).catch((err) => {
-	})
+		loading.close();
-
+	});
-
+};
-}
-
 </script>
 
 <style lang="less">
 .main {
 	width: 100vw;
+	overflow: hidden;
 
 	.container {
 		display: flex;
-
+		box-sizing: border-box;
-		.left {
-			width: 40%;
-			height: 100vh;
-			box-sizing: border-box;
-			background-color: #1db97d;
-			padding: 20px 40px;
-
-		}
 
 		.right {
-			width: 60%;
+			position: relative;
-			background-color: #ffffff;
+			width: 1600px;
+			height: 900px;
 			padding: 20px 40px 20px 50px;
+			border-left: 3px solid #23516e;
+			position: relative;
+			/* 添加 position: relative */
+			overflow: hidden;
+			/* 防止内容溢出 */
+
+			.background-video {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				z-index: -1;
+				/* 确保视频在内容之下 */
+			}
 
 			.setup {
 				display: flex;
+				color: #fff;
 
 				.setup-item {
 					padding: 10px 6px;
@@ -150,7 +147,7 @@ const onSubmit = () => {
 						width: 20px;
 						height: 20px;
 						border-radius: 50%;
-						background-color: red;
+						background-color: rgb(255, 255, 255);
 						margin-right: 5px;
 					}
 				}
@@ -161,15 +158,27 @@ const onSubmit = () => {
 			}
 
 			.from {
+				width: 420px;
+				height: 320px;
+				color: #107A4E;
+				background-color: #ffffff44;
+				border-radius: 20px;
+				border: 1px solid #fff;
+				padding: 32px;
+				box-sizing: border-box;
 
 				.from-title {
-					display: flex;
+					font-family: Source Han Sans SC;
-					padding: 10px 0 0 0;
+					font-weight: 500;
+					font-size: 24px;
+					color: #107A4E;
+					line-height: 37px;
+
 
 					div {
 						font-size: 20px;
 						font-weight: 600;
-						border-bottom: 4px solid #1db97d;
+						// border-bottom: 4px solid #1db97d;
 					}
 				}
 
@@ -179,25 +188,53 @@ const onSubmit = () => {
 
 					.from-input-item {
 						display: flex;
-						padding: 20px 0;
+						padding: 8px 0;
 
 						.from-input-item-title {
+							color: #107A4E;
+							font-size: 18px;
+							font-weight: 500;
 							width: 80px;
 							height: 50px;
 						}
+
+						.loginButton {
+							width: 359px;
+							height: 50px;
+							background: #FFFFFF;
+							border-radius: 24px;
+							border: 1px solid #FFFFFF;
+
+
+							font-family: Source Han Sans SC;
+							font-weight: 500;
+							font-size: 18px;
+							color: #107A4E;
+							line-height: 37px;
+						}
+					}
+
+					.from-input-item1 {
+						display: flex;
+						width: 359px;
+						height: 50px;
+						background: rgba(147, 174, 158, 0.37);
+						border-radius: 24px;
+						border: 1px solid #FFFFFF;
+						padding: 12px 25px 13px 25px;
+						box-sizing: border-box;
+						margin-bottom: 16px;
 					}
 				}
 			}
 		}
 	}
-
 }
 
 .center-line {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	// justify-content: center;
 }
 
 .center-justify {
@@ -209,7 +246,6 @@ const onSubmit = () => {
 .center-align {
 	display: flex;
 	justify-content: space-between;
-
 }
 
 .center-flex {
@@ -217,4 +253,27 @@ const onSubmit = () => {
 	justify-content: center;
 	align-items: center;
 }
+
+.el-input__wrapper {
+	--el-input-focus-border-color: rgba(255, 255, 0, 0);
+	--el-menu-hover-bg-color: rgba(255, 255, 0, 0);
+
+}
 </style>
+
+<style scoped>
+::v-deep(.el-input__wrapper) {
+	background-color: rgba(255, 0, 0, 0);
+	box-shadow: none;
+
+}
+
+::v-deep(.el-input__inner) {
+	color: #107A4E;
+
+}
+
+::v-deep(.el-input__inner::placeholder) {
+	color: #107A4E;
+}
+</style>

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 size="small" :data="tableData" stripe v-loading="loading">
-          <el-table-column prop="hostId" label="主播id" width="200" />
+          <el-table-column prop="hostId" label="主播id" width="200">
-          <el-table-column prop="hostName" label="主播名字" min-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"
+                  <span @mouseover="openPopover(scope.row.hostId, label.paramCode)"
-                    @mouseout="isPopoverVisible[`${scope.row.hostId}-${label.paramCode}`] = false">
+                    @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>

src/views/hosts/workbenches.vue

@@ -1,98 +1,270 @@
 <template>
-    <div class="container">
+    <div class="center-line workbenches">
-        <el-card class="box-card">
+        <div class="center-align" style="width: 100%; margin: 0 20px;">
-            <template #header>
+            <div class="box-card-num1 center-line">
-                <div class="card-header">
+                <div>总数量: <span>{{ hostData.totalCount }}</span></div>
-                    <span>工作台 </span>
+                <div>有效主播: <span>{{ hostData.validAnchorsCount }}</span></div>
-                </div>
+                <div> 已查询: <span>{{ hostData.checkedDataCount }}</span></div>
-            </template>
+                <div>可邀请: <span>{{ hostData.canInvitationCount }}</span></div>
-            <el-row :gutter="20">
+
-                <el-col :span="8">
-                    <div class="input-group">
-                        <label>设置金币数量</label>
-                        <el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
-                            placeholder="最小值" style="width: 100%">
-                            <template #prepend>最小金币数</template>
-                        </el-input>
-                        <el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
-                            placeholder="最大值" style="width: 100%; margin-top: 10px"> <template #prepend>最大金币数</template>
-                        </el-input>
-                    </div>
-                </el-col>
-                <el-col :span="8">
-                    <div class="input-group">
-                        <label>设置粉丝数量</label>
-                        <el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
-                            placeholder="最小值" style="width: 100%">
-                            <template #prepend>最小粉丝数</template>
-                        </el-input>
-                        <el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
-                            placeholder="最大值" style="width: 100%; margin-top: 10px">
-                            <template #prepend>最大粉丝数</template>
-                        </el-input>
-                    </div>
-                </el-col>
-                <el-col :span="8">
-                    <div class="input-group">
-                        <label>后台查询频率</label>
-                        <el-input type='number' v-model="pyData.frequency.min" :min="0" :max="pyData.frequency.max - 1"
-                            placeholder="次/小时" style="width: 100%">
-                            <template #append>次/小时</template>
-                        </el-input>
-                        <el-input type='number' v-model="pyData.frequency.max" :min="pyData.frequency.min + 1"
-                            :max="100" placeholder="次/24小时" style="width: 100%; margin-top: 10px">
-                            <template #append>次/24小时</template>
-                        </el-input>
-                    </div>
-                </el-col>
-            </el-row>
-            <div style="margin-top: 20px; text-align: center">
-                <el-button v-show="pyData.isStart" type="primary" @click="submit">开始获取数据</el-button>
-                <el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">停止获取</el-button>
-                <el-button @click="reset">重置数据</el-button>
             </div>
-        </el-card>
+            <div class="center-line" style="padding-top: 15vh;">
+                <el-button class="open-login" type="primary" @click="openTK">开启tk</el-button>
+            </div>
+
+            <div>
+
+                <el-card class="box-card-num center-justify" v-for="(item, index) in 2" :key="index">
+                    <div class="center-justify">
+                        <div class="from-input-item">
+                            <div class="from-input-item-title center-justify">
+                                公会账号：
+                            </div>
+                            <el-input :disabled="!(isTk || tkData[index].code == 1)" v-model="tkData[index].account"
+                                style="height: 50px;" placeholder="请输入登录账号" clearable />
+                        </div>
+
+                        <div class="from-input-item">
+                            <div class="from-input-item-title center-justify">
+                                公会密码：
+                            </div>
+                            <el-input :disabled="!(isTk || tkData[index].code == 1)" v-model="tkData[index].password"
+                                style="height: 50px;" type="password" placeholder="请输入登录密码" show-password />
+                        </div>
+
+                        <el-button class="open-login" style="margin-left: 60px;"
+                            :disabled="!(isTk || tkData[index].code == 1)" type="primary"
+                            @click="loginTK(index)">登录tk</el-button>
+                        <div v-if="tkData[index].code == 0" class="loginState" style="background-color: red;"></div>
+                        <div v-else class="loginState" style="background-color: green;"></div>
+
+                    </div>
+
+                </el-card>
+
+            </div>
+        </div>
+
+        <div class="container ">
+
+            <el-card class="box-card">
+                <template #header>
+                    <div class="card-header">
+                        <span class="center-justify"><img src="@/assets/worklogo.png">工作台 </span>
+                        <div>当前网络:{{ countryData }}
+                            <!-- <el-button class="reset-button" @click="reset">重置数据</el-button> -->
+                        </div>
+                    </div>
+                </template>
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <div class="input-group">
+                            <label>设置金币数量</label>
+                            <el-input type='number' v-model="pyData.gold.min" :min="0" :max="pyData.gold.max - 1"
+                                placeholder="最小值" style="width: 100%" :disabled="!pyData.isStart">
+                                <template #prepend>最小金币数</template>
+                            </el-input>
+                            <el-input type='number' v-model="pyData.gold.max" :min="pyData.gold.min + 1" :max="100"
+                                placeholder="最大值" style="width: 100%; margin-top: 10px" :disabled="!pyData.isStart">
+                                <template #prepend>最大金币数</template>
+                            </el-input>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="input-group">
+                            <label>设置粉丝数量</label>
+                            <el-input type='number' v-model="pyData.fans.min" :min="0" :max="pyData.fans.max - 1"
+                                placeholder="最小值" style="width: 100%" :disabled="!pyData.isStart">
+                                <template #prepend>最小粉丝数</template>
+                            </el-input>
+                            <el-input type='number' v-model="pyData.fans.max" :min="pyData.fans.min + 1" :max="100"
+                                placeholder="最大值" style="width: 100%; margin-top: 10px" :disabled="!pyData.isStart">
+                                <template #prepend>最大粉丝数</template>
+                            </el-input>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="input-group">
+                            <label>后台查询频率</label>
+                            <el-input type='number' v-model="pyData.frequency.hour" :min="0"
+                                :max="pyData.frequency.day - 1" placeholder="次/小时" style="width: 100%"
+                                :disabled="!pyData.isStart">
+                                <template #append>次/小时</template>
+                            </el-input>
+                            <el-input type='number' v-model="pyData.frequency.day" :min="pyData.frequency.hour + 1"
+                                :max="100" placeholder="次/24小时" style="width: 100%; margin-top: 10px"
+                                :disabled="!pyData.isStart">
+                                <template #append>次/24小时</template>
+                            </el-input>
+                        </div>
+                    </el-col>
+                </el-row>
+                <div style="margin-top: 20px; text-align: center">
+
+                    <el-button class="submit-button" :disabled="submitting" v-show="pyData.isStart" type="primary"
+                        @click="submit">开始获取数据</el-button>
+                    <el-button v-show="!pyData.isStart" type="danger" @click="unsubmit">停止获取</el-button>
+
+                </div>
+
+            </el-card>
+        </div>
     </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
-import { usePythonBridge } from '@/utils/pythonBridge'
+// import { useIPCountry } from '@/utils/useIPCountry';
-import { setNumData, getNumData } from '@/utils/storage'
+import { usePythonBridge, } from '@/utils/pythonBridge'
-import { ElMessage } from 'element-plus'
+import { setNumData, getNumData, getUser } from '@/utils/storage'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getCountryName } from '@/utils/countryUtil'
+//导入python交互方法
+const { fetchDataConfig, fetchDataCount, loginBackStage, loginTikTok } = usePythonBridge();
 
-const { fetchDataConfig } = usePythonBridge();
+//ip国家
+let countryData = ref('');
+//获取主播数量的定时器
+let getHostTimer = ref(null);
+//获取的主播信息
+let hostData = ref({
+    totalCount: 0,
+    validAnchorsCount: 0,
+    canInvitationCount: 0,
+    checkedDataCount: 0,
 
+});
+//是否开启tk
+let isTk = ref(false);
+
+
+//tk账号信息
+let tkData = ref([
+    {
+        account: '',
+        password: '',
+        index: 1,
+        code: 0,
+    },
+    {
+        account: '',
+        password: '',
+        index: 2,
+        code: 0,
+    },
+
+]);
+
+//python需要的数据
 let pyData = ref({
     gold: { min: 0, max: 0 },
     fans: { min: 0, max: 0 },
-    frequency: { min: 0, max: 0 },
+    frequency: { hour: 0, day: 0 },
     isStart: true,
-    country: 'CN'
+    country: countryData.value,
+    test: '123',
+    test1: { test: 123, test12: 123 },
+    tenantId: getUser().tenantId,
+    userId: getUser().userId,
 });
 
+//按钮提交状态
+let submitting = ref(false);
+
+onMounted(() => {
+    //从缓存获取数据
+    if (getNumData()) {
+        pyData.value = getNumData();
+    }
+    getIpInfo()
+
+})
+
+const getIpInfo = async () => {
+    try {
+        const response = await fetch('https://ipapi.co/json/');
+        if (!response.ok) {
+            throw new Error('请求失败');
+        }
+        const data = await response.json();
+        console.log('IP信息:', data.country);
+
+        countryData.value = getCountryName(data.country);
+    } catch (error) {
+        console.error('请求出错:', error);
+    }
+};
+
 //提交数据到py
 const submit = () => {
-    // console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
+    pyData.value.country = countryData.value;
+    console.log('提交的区间值：', pyData.value);
+    ElMessageBox.confirm(
+        '确认开始爬取数据?',
+        '开始',
+        {
+            confirmButtonText: '开始',
+            cancelButtonText: '取消',
+            type: 'success',
+        }
+    )
+        .then(() => {
+            // console.log('提交的区间值：', pyData.value.gold, pyData.value.fans, pyData.value.frequency);
+            //开始按钮的状态  改为禁用
+            submitting.value = true;
+            setNumData(pyData.value);
+            console.error('提交的区间值：', JSON.stringify(pyData.value));
+
+            fetchDataConfig(JSON.stringify({
+                gold: pyData.value.gold,
+                fans: pyData.value.fans,
+                frequency: pyData.value.frequency,
+                isStart: true,
+                country: countryData.value,
+                tenantId: getUser().tenantId,
+                userId: getUser().userId,
+            })).then((res) => {
+
+                getHostTimer.value = setInterval(() => {
+                    fetchDataCount().then((res) => {
+                        hostData.value = JSON.parse(res);
+                    })
+                }, 1000);
+
+
+            }).finally(() => {
+                setTimeout(() => {
+                    pyData.value.isStart = false;
+                    submitting.value = false;
+                }, 2000)
+
+            })
+        })
+        .catch(() => {
+
+        })
+
 
-    setNumData(pyData.value);
 
-    fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
-        ElMessage.sussec('提交成功')
-        pyData.value.isStart = false;
-    }).catch((err) => {
-        ElMessage.error('提交失败')
-    })
 };
 
 //停止
 const unsubmit = () => {
-    fetchDataConfig(JSON.stringify(pyData.value)).then((res) => {
+    fetchDataConfig(JSON.stringify({
+        gold: pyData.value.gold,
+        fans: pyData.value.fans,
+        frequency: pyData.value.frequency,
+        isStart: false,
+        country: countryData.value,
+        tenantId: getUser().tenantId,
+        userId: getUser().userId,
+    })).then((res) => {
         pyData.value.isStart = true;
-
+        clearInterval(getHostTimer.value);
-        alert('已停止' + res);
+        getHostTimer.value = null;
+        // ElMessage.sussec('已停止')
     }).catch((err) => {
-        alert('停止失败', err);
+        // ElMessage.error('停止失败')
     })
 };
 
@@ -100,37 +272,144 @@ const unsubmit = () => {
 const reset = () => {
     pyData.value.gold = { min: 0, max: 0 };
     pyData.value.fans = { min: 0, max: 0 };
-    pyData.value.frequency = { min: 0, max: 0 };
+    pyData.value.frequency = { hour: 0, day: 0 };
 };
 
 
-onMounted(() => {
+const loginTK = (index) => {
-    console.log(getNumData())
+    loginBackStage(JSON.stringify({
-    if (getNumData()) {
+        account: tkData.value[index].account,
-        pyData.value = getNumData();
+        password: tkData.value[index].password,
-    }
+        index: index
+    })).then((res) => {
+        // let data = JSON.parse(res);
+        // if (data.code == 1) {
+        //     tkData.value[data.index].code = 1;
+        // }
+    }).catch((err) => {
 
-})
+    })
+}
+
+const openTK = () => {
+    isTk.value = true;
+    console.log(isTk.value)
+    loginTikTok();
+
+}
+function jszhuru() {
+    isTk.value = true;
+    tkData[index].code = 1;
+}
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .container {
     margin: 0 auto;
-    padding: 20px;
+}
+
+.workbenches {
+    padding: 45px 29px 22px 27px
 }
 
 .box-card {
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    // width: 1240px;
+    height: 436px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
+    border-radius: 24px;
+}
+
+.box-card-num1 {
+
+    width: 197px;
+    height: 321px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
+    border-radius: 24px;
+    padding-top: 60px;
+    box-sizing: border-box;
+
+    div {
+        height: 20%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        color: #8D8E8E;
+
+        span {
+            color: #000;
+            padding-left: 10px;
+        }
+    }
+}
+
+.box-card-num {
+
+
+
+    width: 897px;
+    height: 145px;
+    background: #FFFFFF;
+    box-shadow: 0px 0px 21px 0px rgba(183, 183, 183, 0.33);
+    border-radius: 24px;
+    margin-bottom: 30px;
+}
+
+.from-input-item {
+    display: flex;
+
+    .from-input-item-title {
+        color: #000000;
+        font-size: 14px;
+        font-weight: 500;
+        width: 100px;
+        height: 50px;
+    }
+
+    .loginButton {
+        width: 100%;
+        height: 40px;
+        color: #ffffff;
+        font-size: 16px;
+
+    }
+}
+
+
+.loginState {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: red;
+    margin-left: 15px;
 }
 
 .card-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    span {
+        font-family: Source Han Sans SC;
+        font-weight: 400;
+        font-size: 20px;
+        color: #2D2727;
+        line-height: 37px;
+
+        img {
+            margin-right: 16px;
+        }
+    }
 }
 
 .input-group {
     margin-bottom: 20px;
+
+    .el-input {
+        margin: 22px 0;
+    }
 }
 
 label {
@@ -139,4 +418,94 @@ label {
     font-weight: bold;
     color: #606266;
 }
+
+.open-login {
+    width: 100px;
+    height: 47px;
+    background: #E7CA92;
+    border-radius: 10px;
+}
+
+.reset-button {
+    width: 132px;
+    height: 47px;
+    background: #E7CA92;
+    border-radius: 10px;
+
+    font-family: Source Han Sans SC;
+    font-weight: 400;
+    font-size: 18px;
+    color: #FFFFFF;
+
+    margin-left: 50px;
+}
+
+.submit-button {
+    width: 160px;
+    height: 47px;
+    background: #338F6A;
+    border-radius: 10px;
+}
+
+.center-line {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    // justify-content: center;
+}
+
+.center-justify {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.center-align {
+    display: flex;
+    justify-content: space-between;
+
+}
+
+.center-flex {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>
+
+
+<style scoped>
+::v-deep(.el-input-group__prepend) {
+    background: #84CEB2;
+    border-radius: 10px 0px 0px 10px;
+    border: 1px solid #B7CEC5;
+    font-family: Source Han Sans SC;
+    font-weight: 400;
+    font-size: 18px;
+    color: #FFFFFF;
+    line-height: 37px;
+}
+
+::v-deep(.el-input-group__append) {
+    background: #84CEB2;
+    border-radius: 0px 10px 10px 0px;
+    border: 1px solid #B7CEC5;
+    font-family: Source Han Sans SC;
+    font-weight: 400;
+    font-size: 18px;
+    color: #FFFFFF;
+    line-height: 37px;
+}
+
+::v-deep(.el-input__wrapper) {
+    width: 218px;
+}
+
+.el-input {
+    width: 200px;
+    height: 48px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    border: 1px solid #B7CEC5;
+}
 </style>

src/views/nav.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <Sidebar />
-    <div class="content">
+    <div class="content ">
       <RouterView />
     </div>
   </div>
@@ -23,21 +23,31 @@ html {
 
 .app-container {
   display: flex;
-  height: 100vh;
+  width: 1600px;
+  height: 900px;
+  background-color: #338F6A;
+
 }
 
 .sidebar {
   width: 200px;
-  background-color: #f5f5f5;
+  background-color: #338F6A;
   padding: 20px;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
 }
 
 .content {
-  width: calc(100% - 200px);
+  margin-left: 280px;
-  margin-left: 200px;
+  width: 1304px;
-  padding: 20px;
+  height: 868px;
-
+  background: #FFFFFF;
+  border-radius: 36px;
+  margin-top: 16px;
+}
 
+.center-justify {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
 }
 </style>