1

大屏/src/pages/index.vue

@@ -3,6 +3,24 @@
     <div class="content">
         <img src="@/assets/1.png" style="width:100%;height:100%;" alt="">
         <img src="@/assets/bg.png" class="mask" alt="">
+        <div class="searchInput">
+            <div class="searchContent">
+                <img src="@/assets/search.png" alt="">
+                <input type="text" v-model="searchText" placeholder="请输入关键词">
+                <div class="searchBtn">搜索</div>
+            </div>
+        </div>
+        <div class="lengend">
+            <div class="legendItem" v-for="(item,index) in legendList"  :key="index">
+                <div class="flag" :style="{background:item.color}"></div>
+                <div class="name">{{item.name}}</div>
+            </div>
+        </div>
+        <div class="toolBox">
+            
+            <div class="toolBtn">漫游模式</div>
+            <div class="toolBtn">第一人称</div>
+        </div>
     </div>
     <div class="header">
         <img src="@/assets/title.png" alt="">
@@ -256,6 +274,14 @@ export default {
                 cardNo:'',
                 name:''
             },
+            searchText:'',
+            legendList:[
+                {color:'#388CFF',name:'1级区域'},
+                {color:'#1AE1FF',name:'2级区域'},
+                {color:'#F4CD2F',name:'3级区域'},
+                {color:'#FF690B',name:'4级区域'},
+                {color:'#C40707',name:'5级区域'}
+            ]
         }
     },
     methods:{
@@ -486,6 +512,100 @@ export default {
             height:100%;
             z-index:1;
         }
+        .searchInput{
+            position: absolute;
+            z-index:2;
+           
+            width:40%;
+            left:30%;
+            top:10%;
+            .searchContent{
+               
+                position: relative;
+                &>img{
+                    width:2rem;
+                    height:2rem;
+                    position: absolute;
+                    left:2.3rem;
+                    top:50%;
+                    transform: translateY(-50%);
+                }
+                input{
+                    width: calc(100% - 13rem);
+                    height: 5rem;
+                    background: rgba(3,8,34,0.4);
+                    border-radius: 2.5rem;
+                    border: 1px solid #68E1FF;
+                    padding-left:5rem;
+                    font-weight: 400;
+                    font-size: 1.4rem;
+                    color: #FFFFFF;
+                    padding-right:8rem;
+                }
+                .searchBtn{
+                    position: absolute;
+                    width: 7rem;
+                    height: 80%;
+                    background: #1378E7;
+                    border-radius: 2.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-family: SourceHanSansSC;
+                    font-weight: 400;
+                    font-size: 1.4rem;
+                    color: #FFFFFF;
+                   
+                    right:0.6rem;
+                    top:10%;
+                    cursor: pointer;
+                }
+            }
+            
+        }
+        .lengend{
+           
+            position: absolute;
+            bottom:5rem;
+            left:26%;
+            z-index:10;
+            .legendItem{
+                display: flex;
+                align-items: center;
+                margin-top:2rem;
+                .flag{
+                    width: 2rem;
+                    height: 1.2rem;
+                }
+                .name{
+                    margin-left:1.3rem;
+                    font-family: SourceHanSansSC;
+                    font-weight: 400;
+                    font-size: 1.4rem;
+                    color: #FFFFFF;
+                }
+            }
+        }
+        .toolBox{
+           
+            position: absolute;
+            left:32%;
+            display: flex;
+            z-index:10;
+          
+            border-radius: 4px;
+            bottom:5rem;
+            .toolBtn{
+                padding:1.3rem 2rem;
+                background: rgba(10,11,12,0.72);
+                border: 1px solid #1AE1FF;
+                margin-right:1.2rem;
+                font-family: SourceHanSansSC;
+                font-weight: 400;
+                font-size: 1.8rem;
+                color: #FFFFFF;
+            }
+        }
     }
     .header{
         position: absolute;