index.css

html{
    height: 100%;
    width: 100%;
}
body {
      background-color: white;
      background-image: url("https://i.imgtg.com/2023/03/09/YQdA1.png");
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      box-sizing: border-box;
      padding-bottom: 80px;
      font-family: 楷体 !important;
    }
.wv-a-alarm[data-v-09fa1830] {
    font-size: 0.9em !important;
}
.wv-lt-refresh a[data-v-4b9dcab4]  {
    color: rgb(218 227 80) !important;
}
/*a标签悬浮后操作*/
a {
    color: black;
    font-size: 20px;
    font-family: 楷体;
}

a:link {
    color: black;
    text-decoration: none;
}
a:hover {
    color: #78ff62;
    text-decoration: none;
}
input {
    font-family: 楷体;
    font-size: 18px;
}
/*天气详情不显示*/
/*div[data-v-db6ccf64] {*/
/*  visibility: hidden;*/
/*}*/
/*显示天气详情，修改尺寸以及背景为空*/

#weather-view-he[data-v-db6ccf64] {
    height: 334px !important;
    background-image: none !important;
    box-shadow: rgb(0 0 0 / 38%) 5px 6px 14px !important;
}
[data-v-db6ccf64] {
    left: -20px !important;
}
/*当屏幕足够小的时候，天气详情不显示*/
/*div[data-v-db6ccf64] {*/
/*  visibility: hidden;*/
/*}*/


/*顶部右上角内容*/
.right_logo1{
    position: fixed;
    top: 0%;
    right: 5%;
    width: 2%;
}
.right_logo2{
    position: fixed;
    top: 0%;
    right: 0%;
    width: 2%;
}
.right_logo3{
    position: fixed;
    top: 61%;
    right: -1%;
    width: 20%;
}
.frame{
  font-size:80%;
}

#logo {
    height: 120px;
    position: absolute;
    left: 40%;
    top: 190px;
    align-content: center;

}


/*图片和中间*/
.image_logo{
    width: 65px;
    height: 65px;
    float: left;
    margin: 15px;
    border: 13px solid rgba(0,0,0,0);
    border-radius: 20px;
    display: block;
}

#top_colum,#movie {
    display: inline-block;
    color: black;
    position: fixed;
    left: 25%;
    top: 46%;
    z-index: 200;
    height: 60px;
    padding-left: 2%;
    font: 17px/26px Arial,sans-serif;
    min-width: 800px;
    max-height: 1080px;

}
#movie{
    top: 65%;
}
#frame_so {
    text-align: center;
    min-width: 830px;
    max-height: 1080px;
    position: fixed;
    left: 23%;
    top:30%;

}
/*输入框阴影*/
input[type="text"] {
  box-shadow: 10px 9px 5px rgb(0 0 0 / 30%);
}



/* 搜索框*/
#kw {
    padding-inline-start: 52px;
    align-content: center;
    width: 530px;
    height: 30px;
    padding: 12px 16px;
    font-size: 16px;
    outline: 0;
    /*box-shadow: none;*/
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #b1ddbc;
    background: none;
    color: #222;
}
#google,#baidu{
    width: 100px;
    height: 56px;
    padding: 1px 16px;
    background: none;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #b1ddbc;
    color: purple;
    vertical-align: revert;
    outline:none;
    /*增加搜索框的阴影效果*/
    box-shadow: 10px 9px 5px rgb(0 0 0 / 30%);
}

/*鼠标浮动显示二级菜单  以网站为例*/
/*鼠标浮动logo后放大*/
.image_logo {
  width: 60px; /* logo 初始宽度 */
  height: 60px; /* logo 初始高度 */
  transition: transform 0.2s ease-in-out; /* 添加过渡效果 */
}


.image_logo:hover {
  transform: scale(1.2); /* 鼠标悬停时放大 1.2 倍 */
    box-shadow: 0px 0px 13px rgb(0 0 0 / 30%);
}
#wed1{
  transition: all 10s linear; /* 添加过渡效果 */

}

#wed2 {
  display: none;
}
#wed2 ul{
    list-style-type: none;
    margin-top: 0;

}


#wed1:hover + #wed2 {
  display: block;
  transition: all 10s linear;
}
#wed2:hover{
  display: block;
  transition: all 10s linear;
}

/*实现ul的环形显示*/
.icon-wrapper {
  position: absolute;
}

.main-icon {
  /* 主图标的样式 */
}

.sub-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  /* 周围四个图标的公共样式 */
  opacity: 0; /* 初始隐藏 */
  transition: opacity 0.2s ease-in-out;
}

.sub-icon.top {
    top: -67px;
    left: 15%;;
  margin-left: -15px;
  /* 顶部图标的样式 */
}

.sub-icon.right {
  top: 16%;
  right: 0px;
  margin-top: -15px;
  /* 右侧图标的样式 */
}

.sub-icon.bottom {
  bottom: 11px;
  left: 14%;
  margin-left: -15px;
  /* 底部图标的样式 */
}

.sub-icon.left {
  top: 17%;
  left: -79px;
  margin-top: -15px;
  /* 左侧图标的样式 */
}

.icon-wrapper:hover .sub-icon {
  opacity: 1; /* 悬停时显示 */
    transform: translateY(-10px);
}




/*环形图标结束*/
/*页脚*/
#footer_end{
    position: fixed;
    bottom: 0%;
    width: 97%;
    line-height: 200px;
}
footer {
    line-height: 50px;
    height: 100%;
    text-align-last: right;
    color: black;
    position: fixed;
    right: 0px;
    top: 88%;
}
/*美化ul li标签*/


/*屏幕缩小后的变化*/
@media screen and (max-width: 1060px){
    #frame_so{
        left: 11%;
    }
    #top_colum,#movie {
        left: 20%;
    }
    #he-plugin-standard{
        display:none;
    }
    .right_logo3{
      display: none;
    }
    .right_logo1{
    right: 7%;
    }
}
@media screen and (max-width: 900px){
    #frame_so{
        left: 1%;
    }
    #top_colum,#movie {
        left: 13%;
    }

}
@media screen and (max-width: 819px) {
    body {
        background-color:white;
        background-image: url("https://i.imgtg.com/2023/03/09/YQVCD.png");
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        box-sizing: border-box;
    }
    #frame_so{
        left: -2%;
        top: 22%;
    }
    #kw{
        width: 360px;
        height: 28px;
    }
    #baidu,#google{
        width: 80px;
        height: 53px;
    }
    #top_colum,#movie {
        left: 11%;
        top: 50%;
    }
    #movie{
        top: 68%;
    }
    .right_logo1{
    right: 10%;
    }
}
@media screen and (max-width: 687px) {
    #frame_so{
        left: -18%;
    }
    #top_colum,#movie {
        left: 3%;
    }
}


/*菜单树代码测试*/