feat：添加专家问答页面和详情页面

src/router/globalRoutes.js

@@ -206,4 +206,16 @@ export default [
         name: "PriceDetail",
         component: () => import("@/views/old_mini/price_detail/index.vue"),
     },
+    // 气象预警详情/农事预警详情
+    {
+        path: "/warning_detail",
+        name: "WarningDetail",
+        component: () => import("@/views/old_mini/home/subPages/warningDetail.vue"),
+    },
+    // 专家问答详情
+    {
+        path: "/expert_detail",
+        name: "ExpertDetail",
+        component: () => import("@/views/old_mini/home/subPages/expertDetail.vue"),
+    },
 ];

src/views/old_mini/chat_frame/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="dialogue">
-        <custom-header :name="nameVal" bgColor="#f2f3f5" isGoBack></custom-header>
+        <custom-header :name="nameVal" bgColor="#f2f3f5"></custom-header>
         <chat-window :text="desc" :userId="userIdVal" :img="imgVal"></chat-window>
     </div>
 </template>

src/views/old_mini/home/components/AgriculturalDynamics.vue

@@ -20,48 +20,66 @@
         <div class="content-area">
             <!-- 气象预警内容 -->
             <div v-if="activeTab === 'weather'" class="content-list">
-                <div class="content-item">
+                <div 
+                    v-for="(item, index) in weatherList" 
+                    :key="index" 
+                    class="content-item"
+                    @click="handleItem(item)"
+                >
                     <div class="item-image">
-                        <img src="@/assets/img/home/banner.png" alt="气象预警" />
+                        <img :src="require('@/assets/img/home/banner.png')" :alt="item.alt" />
                     </div>
                     <div class="item-content">
-                        <div class="item-text">周边5km出现了高温灼烧气象预警, 请注意某某防范!</div>
-                        <div class="item-date">2022-11-12</div>
-                    </div>
-                </div>
-                <div class="content-item">
-                    <div class="item-image">
-                        <img src="@/assets/img/home/banner.png" alt="气象预警" />
-                    </div>
-                    <div class="item-content">
-                        <div class="item-text">周边3km出现了暴雨预警, 请注意防范!</div>
-                        <div class="item-date">2022-11-10</div>
+                        <div class="item-text">{{ item.text }}</div>
+                        <div class="item-date">{{ item.date }}</div>
                     </div>
                 </div>
             </div>
 
             <!-- 农事预警内容 -->
             <div v-if="activeTab === 'agricultural'" class="content-list">
-                <div class="content-item">
+                <div 
+                    v-for="(item, index) in agriculturalList" 
+                    :key="index" 
+                    class="content-item"
+                    @click="handleItem(item)"
+                >
                     <div class="item-image">
-                        <img src="@/assets/img/home/banner.png" alt="农事预警" />
+                        <img :src="require('@/assets/img/home/banner.png')" :alt="item.alt" />
                     </div>
                     <div class="item-content">
-                        <div class="item-text">建议进行病虫害防治, 注意观察作物生长情况</div>
-                        <div class="item-date">2022-11-11</div>
+                        <div class="item-text">{{ item.text }}</div>
+                        <div class="item-date">{{ item.date }}</div>
                     </div>
                 </div>
             </div>
 
             <!-- 专家问答内容 -->
-            <div v-if="activeTab === 'expert'" class="content-list">
-                <div class="content-item">
-                    <div class="item-image">
-                        <img src="@/assets/img/home/banner.png" alt="专家问答" />
+            <div v-if="activeTab === 'expert'" class="content-list expert-qa">
+                <div 
+                    v-for="(item, index) in expertQAList" 
+                    :key="index" 
+                    class="qa-item"
+                    @click="handleItem(item)"
+                >
+                    <div class="question-header">
+                        <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="">
+                        <div class="question-title">{{ item.question }}</div>
                     </div>
-                    <div class="item-content">
-                        <div class="item-text">专家解答: 如何提高作物产量? 建议合理施肥...</div>
-                        <div class="item-date">2022-11-09</div>
+                    <div class="expert-info">
+                        <el-avatar
+                            class="expert-avatar"
+                            :size="16"
+                            :src="item.expertAvatar"
+                        />
+                        <div class="expert-details">
+                            <span class="expert-name">{{ item.expertName }}</span>
+                            <span class="expert-title">{{ item.expertTitle }}</span>
+                            <span class="qa-date">{{ item.date }}</span>
+                        </div>
+                    </div>
+                    <div class="answer-content">
+                        {{ item.answer }}
                     </div>
                 </div>
             </div>
@@ -71,7 +89,9 @@
 
 <script setup>
 import { ref } from "vue";
+import { useRouter } from "vue-router";
 
+const router = useRouter();
 const activeTab = ref("weather");
 
 const tabs = [
@@ -79,6 +99,67 @@ const tabs = [
     { label: "农事预警", value: "agricultural" },
     { label: "专家问答", value: "expert" }
 ];
+
+// 气象预警数据
+const weatherList = ref([
+    {
+        image: "@/assets/img/home/banner.png",
+        alt: "气象预警",
+        text: "周边5km出现了高温灼烧气象预警, 请注意某某防范!",
+        date: "2022-11-12"
+    },
+    {
+        image: "@/assets/img/home/banner.png",
+        alt: "气象预警",
+        text: "周边3km出现了暴雨预警, 请注意防范!",
+        date: "2022-11-10"
+    },
+]);
+
+// 农事预警数据
+const agriculturalList = ref([
+    {
+        image: "@/assets/img/home/banner.png",
+        alt: "农事预警",
+        text: "建议进行病虫害防治, 注意观察作物生长情况",
+        date: "2022-11-11"
+    },
+    {
+        image: "@/assets/img/home/banner.png",
+        alt: "农事预警",
+        text: "土壤湿度偏低, 建议及时灌溉补充水分",
+        date: "2022-11-09"
+    },
+]);
+
+// 专家问答数据
+const expertQAList = ref([
+    {
+        question: "怎么预估我的果园的今年荔枝的产量?",
+        expertName: "高小波",
+        expertTitle: "华南农业大学农业专家",
+        expertAvatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+        date: "2024.11.01",
+        answer: "遇雨补喷: 选择在无风或微风天气进行, 以减少药物的漂移, 如果喷药后4小时内遇到雨水冲刷, 应重新..."
+    },
+    {
+        question: "果树病虫害防治的最佳时间是什么时候?",
+        expertName: "李教授",
+        expertTitle: "中国农业大学植保专家",
+        expertAvatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+        date: "2024.10.28",
+        answer: "春季萌芽前是防治病虫害的关键时期, 建议在3月下旬至4月上旬进行第一次全面喷药..."
+    }
+]);
+
+const handleItem = (item) => {
+    console.log(item);
+    if(activeTab.value === 'expert'){
+        router.push('/expert_detail')
+    }else{
+        router.push('/warning_detail')
+    }
+}
 </script>
 
 <style scoped lang="scss">
@@ -98,11 +179,10 @@ const tabs = [
 
         .tab-item {
             margin-right: 20px;
-            font-size: 14px;
+            padding-bottom: 6px;
             &.active {
                 color: #2199F8;
                 border-bottom: 2px solid #2199F8;
-
             }
         }
     }
@@ -143,6 +223,54 @@ const tabs = [
             .content-item + .content-item{
                 margin-top: 12px;
             }
+
+            // 专家问答样式
+            &.expert-qa {
+                .qa-item {
+                    padding: 0 12px;
+
+                    .question-header {
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 6px;
+                        gap: 8px;
+
+                        .question-icon {
+                            width: 20px;
+                            height: 20px;
+                        }
+
+                        .question-title {
+                            font-size: 16px;
+                            font-weight: 600;
+                        }
+                    }
+
+                    .expert-info {
+                        display: flex;
+                        align-items: center;
+                        gap: 6px;
+                        margin-bottom: 8px;
+                        .expert-details {
+                            display: flex;
+                            align-items: center;
+                            gap: 6px;
+                            font-size: 13px;
+                            color: #666666;
+                        }
+                    }
+
+                    .answer-content {
+                        color: #333333;
+                        .font-bold{
+                            font-weight: 500;
+                        }
+        }
+                }
+                .qa-item + .qa-item{
+                    margin-top: 16px;
+                }
+            }
         }
     }
 }

src/views/old_mini/home/index.vue

@@ -44,7 +44,7 @@
             <img class="farm-check-icon" src="@/assets/img/home/right.png" alt="">
             <div class="create-farm-text success-text">农场创建成功</div>
         </template>
-        <div class="create-farm-btn">{{ farmPopupType === 'create' ? '去创建农场' : '我知道了' }}</div>
+        <div class="create-farm-btn" @click="handleBtn">{{ farmPopupType === 'create' ? '去创建农场' : '我知道了' }}</div>
     </popup>
 </template>
 
@@ -55,6 +55,7 @@ import { Popup } from "vant";
 import weatherInfo from "@/components/weatherInfo.vue";
 import AgriculturalDynamics from "./components/AgriculturalDynamics.vue";
 import { useRouter } from "vue-router";
+import wx from "weixin-js-sdk";
 
 const store = useStore();
 const tabBarHeight = computed(() => store.state.home.tabBarHeight);
@@ -74,21 +75,43 @@ const monitorCards = ref({
         {
             title: "病虫识别",
             content: "智能识别病虫害，提供防治建议",
-            route: "/pest-recognition",
+            route: "/pest",
         },
         {
             title: "专家咨询",
             content: "专业农技专家在线解答疑问",
-            route: "/expert-consultation",
+            route: "/chat_frame?userId=81881&name=专家1",
         },
     ],
 });
 
 // 卡片点击事件
 const handleCardClick = (card) => {
-    router.push(card.route);
+    showFarmPopup.value = true;
+    // if(card.route === "/pest"){
+    //     const dropdownGardenItem = ref({
+    //         organId:766,
+    //         periodId:1,
+    //         wktVal:'wktVal',
+    //         address:'address',
+    //         district:'district',
+    //         name:'荔博园',
+    //     });
+    //     wx.miniProgram.navigateTo({
+    //         url: `/pages/subPages/carmera/index?gardenData=${JSON.stringify(dropdownGardenItem.value)}`,
+    //     });
+    // }else{
+    //     router.push(card.route);
+    // }
 };
 
+const handleBtn = () => {
+    if(farmPopupType.value === 'create'){
+        router.push("/create_farm?isFromHome=true");
+    }
+    showFarmPopup.value = false;
+}
+
 onMounted(() => {});
 
 const isExpanded = ref(false);
@@ -100,7 +123,9 @@ const weatherExpanded = (isExpandedValue) => {
 <style scoped lang="scss">
 .home-index {
     width: 100%;
-    height: 100%;
+    height: 100vh;
+    overflow: auto;
+    position: relative;
     .banner {
         width: 100%;
         height: 200px;

src/views/old_mini/home/subPages/expertDetail.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="expert-detail">
+        <custom-header name="问答详情"></custom-header>
+        <div class="expert-content">
+            <div class="question-header">
+                <img class="question-icon" src="@/assets/img/home/ask-icon.png" alt="" />
+                <div class="question-title">怎么预估我的果园的今年荔枝的产量?</div>
+            </div>
+            <div class="expert-info">
+                <el-avatar
+                    class="expert-avatar"
+                    :size="16"
+                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+                />
+                <div class="expert-details">
+                    <span class="expert-name">高小波</span>
+                    <span class="expert-title">华南农业大学农业专家</span>
+                    <span class="qa-date">2024.11.01</span>
+                </div>
+            </div>
+
+            <!-- 专家信息卡片 -->
+            <div class="expert-card">
+                <el-avatar :size="36" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+                <div class="expert-card-info">
+                    <div class="expert-card-name">高小波</div>
+                    <div class="expert-card-title">华南农业大学农业专家</div>
+                </div>
+            </div>
+
+            <div class="answer-content">
+                <div class="answer-text">
+                    <span class="font-bold">遇雨补喷:</span> 选择在无风或微风天气进行, 以减少药物的漂移,
+                    如果喷药后4小时内遇到雨水冲刷, 应重新...
+                </div>
+                <div class="answer-text">
+                    <span class="font-bold">遇雨补喷:</span> 选择在无风或微风天气进行, 以减少药物的漂移,
+                    如果喷药后4小时内遇到雨水冲刷, 应重新...
+                </div>
+                <div class="answer-text">
+                    <span class="font-bold">遇雨补喷:</span> 选择在无风或微风天气进行, 以减少药物的漂移,
+                    如果喷药后4小时内遇到雨水冲刷, 应重新...
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+</script>
+
+<style scoped lang="scss">
+.expert-detail {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    .expert-content {
+        padding: 8px 16px;
+        .question-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 6px;
+            gap: 8px;
+            .question-icon {
+                width: 20px;
+                height: 20px;
+            }
+
+            .question-title {
+                font-size: 16px;
+                font-weight: 600;
+            }
+        }
+
+        .expert-info {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            padding-bottom: 14px;
+            border-bottom: 1px solid #f5f5f5;
+            .expert-details {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                font-size: 13px;
+                color: #666666;
+            }
+        }
+
+        // 专家信息卡片样式
+        .expert-card {
+            margin: 13px 0;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .expert-card-info {
+                .expert-card-name {
+                    font-weight: 600;
+                }
+
+                .expert-card-title {
+                    font-size: 12px;
+                    color: #666666;
+                }
+            }
+        }
+
+        .answer-content {
+            color: #333333;
+            line-height: 1.5;
+            .font-bold {
+                font-weight: 500;
+            }
+            .answer-text + .answer-text {
+                margin-top: 8px;
+            }
+        }
+    }
+}
+</style>

src/views/old_mini/home/subPages/expertList.vue

@@ -156,7 +156,7 @@ function toPage(containerId) {
     if (isToSelect) {
         router.replace(`/plan?containerId=${containerId}`)
     } else {
-        router.push(`/chat_frame?chat_frame?userId=91754&name=咨询专家`)
+        router.push(`/chat_frame?userId=91754&name=咨询专家`)
     }
 }
 

src/views/old_mini/home/subPages/warningDetail.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="warning-detail">
+        <custom-header name="查看详情"></custom-header>
+        <div class="article-content">
+            <div class="article-header">
+                <div class="title">海南**月即将迎来**物候期及近期管理建议</div>
+                <div class="author-info">
+                    <el-avatar :size="16" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
+                    <span class="author-name">飞鸟管家 2024.11.01</span>
+                </div>
+            </div>
+
+            <div class="article-image">
+                <img src="@/assets/img/home/banner.png" alt="荔枝开花图片" />
+            </div>
+
+            <div class="article-text">
+                <p class="intro-text">
+                    根据**{地区}近期气象数据与果园监测，您的荔枝园即将进入{具体物候期,如"盛花期"}(预计{时间范围,
+                    如"3月15-20日"**)。请及时做好以下管理:
+                </p>
+
+                <ul class="management-list">
+                    <li>疏花控穗:若花量过大(每穗超150朵),建议剪除基部弱花,保留中部健壮花穗。</li>
+                    <li>疏花控穗:若花量过大(每穗超150朵),建议剪除基部弱花,保留中部健壮花穗。</li>
+                    <li>疏花控穗:若花量过大(每穗超150朵),建议剪除基部弱花,保留中部健壮花穗。</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { ref } from "vue";
+</script>
+
+<style scoped lang="scss">
+.warning-detail {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    .article-content {
+        padding: 8px 16px;
+
+        .article-header {
+            .title {
+                font-size: 18px;
+                font-weight: bold;
+                margin-bottom: 6px;
+                text-align: left;
+            }
+
+            .author-info {
+                display: flex;
+                align-items: center;
+                padding-bottom: 12px;
+                border-bottom: 1px solid #f5f5f5;
+
+                .author-name {
+                    font-size: 14px;
+                    color: #666;
+                    font-weight: normal;
+                }
+            }
+        }
+
+        .article-image {
+            width: 100%;
+            margin: 12px 0 20px 0;
+
+            img {
+                width: 100%;
+                height: 175px;
+                border-radius: 5px;
+            }
+        }
+
+        .article-text {
+            .intro-text {
+                color: #252525;
+                margin-bottom: 10px;
+            }
+
+            .management-list {
+                list-style: none;
+                padding: 0;
+                margin: 0;
+
+                li {
+                    position: relative;
+                    color: #252525;
+                    margin-bottom: 10px;
+                    padding-left: 16px;
+
+                    &::before {
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        top: 8px;
+                        width: 6px;
+                        height: 6px;
+                        background-color: #333333;
+                        border-radius: 50%;
+                    }
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/old_mini/monitor/index.vue

@@ -38,7 +38,7 @@
                 </div>
             </div>
         </div>
-        
+
         <!-- 实时播报 -->
         <div class="realtime-broadcast">
             <div class="broadcast-header">
@@ -49,30 +49,37 @@
                         <span class="broadcast-text">点击播报</span>
                     </div>
                 </div>
-                <div class="more-link" @click="handleMoreBroadcast">更多></div>
+                <div class="more-link" @click="handleMoreBroadcast">
+                    <span>更多</span>
+                    <el-icon size="12"><ArrowRightBold /></el-icon>
+                </div>
             </div>
-            
+
             <div class="broadcast-list">
-                <div 
-                    v-for="(item, index) in broadcastList" 
+                <div
+                    v-for="(item, index) in broadcastList"
                     :key="index"
                     class="broadcast-item"
                     @click="handleBroadcastItem(item)"
                 >
-                    <div class="item-icon">
-                        <img src="@/assets/img/monitor/bell.png" alt="通知" />
-                    </div>
                     <div class="item-content">
-                        <div class="item-title">{{ item.title }}</div>
+                        <div class="content-top">
+                            <div class="item-icon">
+                                <img src="@/assets/img/monitor/bell.png" alt="通知" />
+                            </div>
+                            <div class="item-title">{{ item.title }}</div>
+                        </div>
                         <div class="item-status">
-                            距离执行还差<span class="countdown">{{ item.daysLeft }}</span>天
+                            距离执行还差 <span class="countdown">{{ item.daysLeft }}</span> 天
                         </div>
                     </div>
-                    <div class="item-zone">{{ item.zone }}</div>
+                    <div class="item-zone">
+                        <div class="point"></div>
+                        <span>{{ item.zone }}</span>
+                    </div>
                 </div>
             </div>
         </div>
-        
     </div>
 </template>
 
@@ -116,23 +123,23 @@ const broadcastList = ref([
     {
         title: "某莫普农事未执行未执行",
         daysLeft: 3,
-        zone: "2区"
+        zone: "2区",
     },
     {
         title: "某莫普农事未执行未执行",
         daysLeft: 3,
-        zone: "2区"
+        zone: "2区",
     },
     {
         title: "某莫普农事未执行未执行",
         daysLeft: 3,
-        zone: "2区"
+        zone: "2区",
     },
     {
         title: "某莫普农事未执行未执行",
         daysLeft: 3,
-        zone: "2区"
-    }
+        zone: "2区",
+    },
 ]);
 
 // 卡片点击事件
@@ -185,7 +192,7 @@ function toFarmInfo() {
     height: 100%;
     padding: 13px 10px;
     box-sizing: border-box;
-    background-image: linear-gradient(250deg, #cbebff 0%, #ffffff 80%);
+    background-image: linear-gradient(250deg, #CBEBFF 0% ,#dceffd 50%,#e7f3fd 100%);
     .weather-mask {
         position: fixed;
         top: 0;
@@ -260,7 +267,7 @@ function toFarmInfo() {
         .function-card {
             background: #fff;
             border-radius: 12px;
-            padding: 15px;
+            padding: 25px 0;
             box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
             position: relative;
             display: flex;
@@ -286,119 +293,124 @@ function toFarmInfo() {
                 background: #2199f8;
                 color: #fff;
             }
-         }
-     }
-     
-     .realtime-broadcast {
-         margin-top: 20px;
-         padding: 0 10px;
-         
-         .broadcast-header {
-             display: flex;
-             align-items: center;
-             justify-content: space-between;
-             margin-bottom: 12px;
-             
-             .header-left {
-                 display: flex;
-                 align-items: center;
-                 gap: 12px;
-                 
-                 .broadcast-title {
-                     font-size: 16px;
-                     font-weight: 600;
-                     color: #1D2129;
-                 }
-                 
-                 .broadcast-action {
-                     display: flex;
-                     align-items: center;
-                     gap: 4px;
-                     cursor: pointer;
-                     
-                     .speaker-icon {
-                         width: 16px;
-                         height: 16px;
-                     }
-                     
-                     .broadcast-text {
-                         font-size: 14px;
-                         color: #2199F8;
-                     }
-                 }
-             }
-             
-             .more-link {
-                 font-size: 14px;
-                 color: #1D2129;
-                 cursor: pointer;
-             }
-         }
-         
-         .broadcast-list {
-             background: #fff;
-             border-radius: 8px;
-             overflow: hidden;
-             
-             .broadcast-item {
-                 display: flex;
-                 align-items: center;
-                 padding: 12px 16px;
-                 border-bottom: 1px solid #F2F2F2;
-                 cursor: pointer;
-                 transition: background-color 0.2s ease;
-                 
-                 &:last-child {
-                     border-bottom: none;
-                 }
-                 
-                 &:active {
-                     background-color: #F8F9FA;
-                 }
-                 
-                 .item-icon {
-                     width: 17px;
-                     height: 11px;
-                     margin-right: 12px;
-                     flex-shrink: 0;
-                     
-                     img {
-                         width: 100%;
-                         height: 100%;
-                     }
-                 }
-                 
-                 .item-content {
-                     flex: 1;
-                     
-                     .item-title {
-                         font-size: 14px;
-                         color: #1D2129;
-                         margin-bottom: 4px;
-                         line-height: 1.4;
-                     }
-                     
-                     .item-status {
-                         font-size: 12px;
-                         color: #86909C;
-                         
-                         .countdown {
-                             color: #F53F3F;
-                             font-weight: 500;
-                         }
-                     }
-                 }
-                 
-                 .item-zone {
-                     background: #F2F3F5;
-                     color: #4E5969;
-                     font-size: 12px;
-                     padding: 2px 8px;
-                     border-radius: 10px;
-                     flex-shrink: 0;
-                 }
-             }
-         }
-     }
+        }
+    }
+
+    .realtime-broadcast {
+        margin-top: 10px;
+        background: #fff;
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: 12px;
+
+        .broadcast-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 4px;
+
+            .header-left {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+
+                .broadcast-title {
+                    font-size: 16px;
+                    font-weight: 600;
+                    color: #1d2129;
+                }
+
+                .broadcast-action {
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+
+                    .speaker-icon {
+                        width: 16px;
+                        height: 14px;
+                    }
+
+                    .broadcast-text {
+                        color: #2199f8;
+                    }
+                }
+            }
+
+            .more-link {
+                display: flex;
+                align-items: center;
+                color: #4e5969;
+            }
+        }
+
+        .broadcast-list {
+            overflow: auto;
+
+            .broadcast-item {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 12px 0;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+                &:last-child {
+                    border-bottom: none;
+                }
+
+                .item-content {
+                    .content-top{
+                        display: flex;
+                        align-items: center;
+                    }
+                    .item-icon {
+                        margin-right: 8px;
+                        background: rgba(255, 0, 0, 0.05);
+                        width: 26px;
+                        height: 26px;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        img {
+                            width: 18px;
+                            height: 12px;
+                        }
+                    }
+
+                    .item-title {
+                        color: #1d2129;
+                    }
+
+                    .item-status {
+                        margin-top: 3px;
+                        font-size: 13px;
+                        color: rgba(29, 33, 41, 0.5);
+
+                        .countdown {
+                            color: #ff7254;
+                        }
+                    }
+                }
+
+                .item-zone {
+                    background: rgba(241, 243, 246, 0.5);
+                    color: #7c7e81;
+                    font-size: 12px;
+                    padding: 3px 11px;
+                    border-radius: 25px;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    .point {
+                        width: 6px;
+                        height: 6px;
+                        border-radius: 50%;
+                        background: rgba(124, 126, 129, 0.5);
+                    }
+                }
+            }
+        }
+    }
 }
 </style>