1

YM

2024-07-26 571e12ca122d12f20689e3040a0f368ef1ae8850

 src/pages/index/index.vue

@@ -1,319 +1,376 @@
<template>
   <view class="container flex flex-center" style="align-items: flex-start;">
      <view class="repository relative">
         <view class="flex Ttop flex-column" style="width: 100%;">
            <view class="flex" style="width: 100%;">
               <view class="" style="padding-left: 4rem;"></view>
               <view class=" flex flex-center flex-wrap" style="width: 100%; flex-direction: column;">
                  <view class=""></view>
                  <view class="" ref="Rtop">
                     <text class="login"></text>
                     <text style="font-size: .36rem;letter-spacing: 4rpx;vertical-align: middle;font-family: cursive;font-weight: bold;">中国医学人物知识库</text>
                  </view>
               </view>
               <view class="flex relative" style="height: .5rem;">
                  <!-- 小搜索图片 -->
                  <view class="flex searchCss" :style="{'backgroundColor': isExpanded==true?'#fff':''}"
                     style="border-radius: .5rem; height: 75%; width: 2.33rem;margin-right: .30rem;justify-content: flex-end;">
                     <!-- overflow: hidden;  -->
                     <input :style="{'display': isExpanded == true ? 'block' : 'none'}" @confirm="toggleSearch" type="text"
                        style="margin-left: .05rem;color: #2C2C2C; flex: 1; background-color: #fff; font-size: .13rem;"
                        class="search-input" v-model="searchInput" placeholder="请输入搜索内容" />
                     <view class="search-logo" @click="toggleSearch"
                        style="background-color: #244A7B;border-radius: 50%;margin-top: -4rpx;"></view>
                  </view>
                  <el-dropdown trigger="click" @command="handleCommand" style="margin-right:  .3rem;">
                     <view @click="iconClick(2)" class="s2 ss1 "></view>
                     <el-dropdown-menu v-if="isCommand" slot="dropdown">
                        <el-dropdown-item command="1" icon="el-icon-plus">修改密码</el-dropdown-item>
                        <el-dropdown-item command="2" icon="el-icon-circle-plus">退出登录</el-dropdown-item>
                     </el-dropdown-menu>
                  </el-dropdown>
                  <view @click="iconClick(item+2)" v-for="item in 1" :key="item" :class="'s'+(item+2)"
                     class="ss1 cursor" style="margin-right:  .3rem;">
                  </view>
               </view>
            </view>
            <!-- 高级搜索 -->
            <view v-if="isSearchTrue" class="Search" style="margin: .35rem 0 .16rem 0; height: .52rem;">
               <advancedSearch @onSearch="onSearch" placehold="" :isAvancedTrue="false" :isSearchTrue="false" />
            </view>
         </view>
         <view class="Bbottom ">
            <!-- 选项卡 -->
            <ul class="secretary  flex ">
               <li @click="listDataClick(item)" v-for="(item,index) in listData" :key="index">
                  <span class="font-family"
                     style="font-weight: 700;color: #2C2C2C; width: .36rem;display: inline-block; font-size: .32rem;overflow: hidden;height: 80%;line-height: 1.5;">{{item.name}}</span>
                  <view class="flex flex-content"
                     style="width: .5rem;height: .5rem;border-radius: 50%;background-color: #244A7B;">
                     <image style="width: 40%;height: 20%;" src="@/static/image/eResize.png" mode=""></image>
                  </view>
               </li>
            </ul>
         </view>
      </view>
      <view class="hua"></view>
      <!-- 底部人物背景图左侧 -->
      <view class="fff"></view>
      <!-- 底部花的背景图右侧 -->
      <view class="rrr"></view>
      <Footer1 />
   </view>
  <view class="container flex flex-center" style="align-items: flex-start">
    <view class="repository relative">
      <view class="flex Ttop flex-column" style="width: 100%">
        <view class="flex" style="width: 100%">
          <view style="padding-left: 4rem"></view>
          <view
            class="flex flex-center flex-wrap"
            style="width: 100%; flex-direction: column"
          >
            <view></view>
            <view ref="Rtop">
              <text class="login"></text>
              <text
                style="
                  font-size: 0.36rem;
                  letter-spacing: 4rpx;
                  vertical-align: middle;
                  font-family: cursive;
                  font-weight: bold;
                "
                >中国历代医学人物知识库</text
              >
            </view>
          </view>
          <view class="flex relative" style="height: 0.5rem">
            <!-- 小搜索图片 -->
            <view
              class="flex searchCss"
              :style="{ backgroundColor: isExpanded == true ? '#fff' : '' }"
              style="
                border-radius: 0.5rem;
                height: 75%;
                width: 2.33rem;
                margin-right: 0.3rem;
                justify-content: flex-end;
              "
            >
              <!-- overflow: hidden;  -->
              <input
                :style="{ display: isExpanded == true ? 'block' : 'none' }"
                @confirm="toggleSearch"
                type="text"
                style="
                  margin-left: 0.16rem;
                  color: #2c2c2c;
                  flex: 1;
                  background-color: #fff;
                  font-size: 0.13rem;
                "
                class="search-input"
                v-model="searchInput"
                placeholder="请输入搜索内容"
              />
              <view
                class="search-logo"
                @click="toggleSearch"
                style="background-color: #244a7b; border-radius: 50%"
              ></view>
            </view>
            <el-dropdown
              trigger="click"
              @command="handleCommand"
              style="margin-right: 0.3rem"
            >
              <view @click="iconClick(2)" class="s2 ss1"></view>
              <el-dropdown-menu v-if="isCommand" slot="dropdown">
                <el-dropdown-item command="1">修改密码</el-dropdown-item>
                <el-dropdown-item command="2">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <view
              @click="iconClick(item + 2)"
              v-for="item in 1"
              :key="item"
              :class="'s' + (item + 2)"
              class="ss1 cursor"
              style="margin-right: 0.3rem"
            >
            </view>
          </view>
        </view>
        <!-- 高级搜索 -->
        <view
          v-if="isSearchTrue"
          class="Search"
          style="margin: 0.35rem 0 0.16rem 0; height: 0.52rem"
        >
          <advancedSearch
            @onSearch="onSearch"
            placehold=""
            :isAvancedTrue="false"
            :isSearchTrue="false"
          />
        </view>
      </view>
      <view class="Bbottom">
        <!-- 选项卡 -->
        <ul class="secretary flex">
          <li
            @click="listDataClick(item)"
            v-for="(item, index) in listData"
            :key="index"
          >
            <span
              class="font-family"
              style="
                font-weight: 700;
                color: #2c2c2c;
                width: 0.36rem;
                display: inline-block;
                font-size: 0.32rem;
                overflow: hidden;
                height: 80%;
                line-height: 1.5;
              "
              >{{ item.name }}</span
            >
            <view
              class="detailBtn flex flex-content"
              style="
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                background-color: #244a7b;
              "
            >
              <image
                style="width: 40%; height: 20%"
                src="@/static/image/eResize.png"
                mode=""
              ></image>
            </view>
          </li>
        </ul>
      </view>
    </view>
    <view class="hua"></view>
    <!-- 底部人物背景图左侧 -->
    <view class="fff"></view>
    <!-- 底部花的背景图右侧 -->
    <view class="rrr"></view>
    <Footer1 />
  </view>
</template>

<script>
   import {
      nextTick
   } from "vue";
   import {
      getlogout
   } from '@/api/index.js'
   import Footer1 from '@/components/footer/footer.vue'
   export default {
      components: {
         Footer1
      },
      data() {
         return {
            isCommand: true,
            // 搜索的显示
            isSearchTrue: true,
            isExpanded: false, // 控制搜索框是否展开  
            searchInput: '', //小图标的搜索框
            // 登录注册框
            loginTrue: true,
            Rtop1: 0,
            value: 'sdfdsf',
            // 注册用户对应的数据
            registerData: {
               loginID: '',
               pass: '',
               checkPass: '',
               cellphoneORmailbox: '',
               verifyCode: ''
            },
            // 登录用户账号
            loginData: {
               // 账号
               loginID: '',
               pass: ''
            },
            // 重置密码
            resetDataPass: {
               cellphoneORmailbox: '',
               verifyCode: "",
               newPass: "",
               checkPass: ""
            },
            // 修改密码
            amendDataPass: {
               loginID: '',
               originalPass: "",
               newPass: "",
               checkPass: ""
            },
            // 书籍数据
            listData: [{
                  name: '中医人物数据库',
                  id: 1,
               }, {
                  name: '世医医家数据库',
                  id: 2,
               }, {
                  name: '中医学术流派',
                  id: 3,
               }, {
                  name: '中医地域医谱',
                  id: 4,
               }, {
                  name: '中医医事制度',
                  id: 5,
               },
import { nextTick } from "vue";
import { getlogout } from "@/api/index.js";
import Footer1 from "@/components/footer/footer.vue";
export default {
  components: {
    Footer1,
  },
  data() {
    return {
      isCommand: true,
      // 搜索的显示
      isSearchTrue: true,
      isExpanded: false, // 控制搜索框是否展开
      searchInput: "", //小图标的搜索框
      // 登录注册框
      loginTrue: true,
      Rtop1: 0,
      value: "sdfdsf",
      // 注册用户对应的数据
      registerData: {
        loginID: "",
        pass: "",
        checkPass: "",
        cellphoneORmailbox: "",
        verifyCode: "",
      },
      // 登录用户账号
      loginData: {
        // 账号
        loginID: "",
        pass: "",
      },
      // 重置密码
      resetDataPass: {
        cellphoneORmailbox: "",
        verifyCode: "",
        newPass: "",
        checkPass: "",
      },
      // 修改密码
      amendDataPass: {
        loginID: "",
        originalPass: "",
        newPass: "",
        checkPass: "",
      },
      // 书籍数据
      listData: [
        {
          name: "历代人物",
          id: 1,
        },
        {
          name: "家学传承",
          id: 2,
        },
        {
          name: "学术图谱",
          id: 6,
        },
        {
          name: "学术流派",
          id: 3,
        },
        {
          name: "地域图谱",
          id: 4,
        },
        // {
        //   name: "中医医事制度",
        //   id: 5
        // }
      ],
    };
  },
  onLoad() {
    uni.getSystemInfo({
      success: function (info) {
        // console.log('屏幕的宽度：' + info.windowWidth);
        // console.log('屏幕的高度：' + info.windowHeight);
      },
    });
  },
  mounted() {
    this.getElementWidth();
    // this.$store.commit('set_id',1)
  },
  methods: {
    // 搜索
    onSearch(val) {
      uni.navigateTo({
        url: "/pages/knowledgeBase/knowledgeBase?keyword=" + val.text,
      });
    },
    // 搜索
    // 切换搜索框的展开和收起状态
    toggleSearch() {
      this.isExpanded = !this.isExpanded;
      this.$nextTick(() => {
        if (this.searchInput.trim() !== "") {
          uni.navigateTo({
            url:
              "/pages/knowledgeBase/knowledgeBase?keyword=" + this.searchInput,
          });
        }
        this.searchInput = "";
      });
    },
    // 列表项跳转
    listDataClick(item) {
      // 在当前页面设置全局变量
      // uni.setStorageSync('globalData', { id: 123, name: 'example' });
      if (item.id == 1) {
        uni.navigateTo({
          // url: '/pages/character/detail?id=' + item.id
          url: "/pages/character/index?id=" + item.id,
        });
      } else if (item.id == 2) {
        uni.navigateTo({
          url: "/pages/inherit/index?id=" + item.id,
        });
        // uni.navigateTo({
        //    url: '/pages/shiyiHome/shiyiHome'
        // })
      } else if (item.id == 3) {
        uni.navigateTo({
          url: "/pages/academicGenres/index?id=" + item.id,
        });
      } else if (item.id == 4) {
        uni.navigateTo({
          url: "/pages/territory/territory?id=" + item.id,
        });
      } else if (item.id == 5) {
        uni.navigateTo({
          url: "/pages/TcmSystem/TcmSystem?id=" + item.id,
        });
      } else if (item.id == 6) {
        uni.navigateTo({
          url: "/pages/academicSchools/index",
        });
      }
    },

            ]
         }
      },
      onLoad() {
         // console.log(,';dsfdsf');
			
         uni.getSystemInfo({
            success: function(info) {
               // console.log('屏幕的宽度：' + info.windowWidth);
               // console.log('屏幕的高度：' + info.windowHeight);
            }
         });
      },
      mounted() {
         this.getElementWidth();
            // this.$store.commit('set_id',1)
      },
      methods: {
         // 搜索
         onSearch(val) {
            uni.navigateTo({
               url: '/pages/knowledgeBase/knowledgeBase?name=' + val.text
            })
         },
         // 搜索
         // 切换搜索框的展开和收起状态
         toggleSearch() {
            console.log('sdf');
            // console.log('撒旦范德萨发生的',this.searchInput);
            this.isExpanded = !this.isExpanded;
            this.$nextTick(() => {
               if (this.searchInput.trim() !== '') {
                  uni.navigateTo({
                     url: '/pages/knowledgeBase/knowledgeBase?name=' + this.searchInput
                  })
                  // console.log('搜索', this.searchInput);
               } else {
                  console.log('不搜索');
               }

               this.searchInput = '';
               console.log(this.isExpanded);
            })
         },
         // 列表项跳转
         listDataClick(item) {
            console.log(item);
            // 在当前页面设置全局变量
            // uni.setStorageSync('globalData', { id: 123, name: 'example' });
            if (item.id == 1) {
               uni.navigateTo({
                  // url: '/pages/character/detail?id=' + item.id
                  url: '/pages/character/index?id=' + item.id
               })
            } else if (item.id == 2) {
               console.log(item.name);
               uni.navigateTo({
                  url: '/pages/inherit/index?id=' + item.id
               })
               // uni.navigateTo({
               //    url: '/pages/shiyiHome/shiyiHome'
               // })
            } else if (item.id == 3) {
               uni.navigateTo({
                  url: '/pages/dataDisplay/dataDisplay?id=' + item.id
               })
            } else if (item.id == 4) {
               uni.navigateTo({
                  url: '/pages/territory/territory?id=' + item.id
               })
            } else if (item.id == 5) {
               uni.navigateTo({
                  url: '/pages/TcmSystem/TcmSystem?id=' + item.id
               })
            }

         },

         // 验证码校验
         validateVerificationCode(rule, value, callback) {
            if (value !== '123456') {
               callback(new Error('验证码错误'));
            } else {
               callback();
            }
         },
         getElementWidth() {

            this.$nextTick(() => {
               var width = this.$refs.Rtop.$el.clientWidth;
               this.Rtop1 = width + 50;
               console.log('Element width:', width);
            })
         },
         iconClick(index) {
            console.log(index);
            // 搜索的显示
            if (index == 1) {
               // this.isSearchTrue = !this.isSearchTrue
            } else if (index == 2) {
               // 检查 localStorage 中是否存在 token
               if (localStorage.getItem('access_token')) {
                  // token 存在
                  console.log('access_token');
                  this.isCommand = true
               } else {
                  // token 不存在
                  // console.log('Token does not exist.');
                  this.isCommand = false
                  uni.navigateTo({
                     url: '/pages/Login/Login'
                  })
               }

            } else if (index == 3) {
               console.log('帮助');
            }
         },
         // 修改获取退出按钮
         handleCommand(int) {
            if (int == 1) {
               console.log('修改密码');
               uni.navigateTo({
                  url: '/pages/changePassword/changePassword'
               })
            } else if (int == 2) {
               // console.log('退出登录');
               uni.showModal({
                  // 询问用户是否退出登录
                  title: '退出登录',
                  content: '您确定要退出登录吗?',
                  success: async (res) => {
                     console.log(res, 'reresresrer');

                     if (res.confirm) {
                        // 退出接口
                        await getlogout().then(res => {
                           //确定退出拿到token并清除token
                           let TOKEN = uni.getStorageSync('缓存名称');
                           uni.clearStorageSync();
                           //退出成功！并跳转到其他页面
                           uni.showToast({
                              title: '退出成功',
                              icon: 'none',
                           });
                        })
                        // setTimeout(() => {
                        //    uni.reLaunch({
                        //       url: '退出后跳转地址',
                        //    });
                        // }, 1500);
                     } else if (res.cancel) {
                        // console.log('用户点击取消');
                        uni.showToast({
                           title: '用户点击取消',
                           icon: 'none',
                        });
                     }
                  },
               });
            }
         },
			
      }
   }
    // 验证码校验
    validateVerificationCode(rule, value, callback) {
      if (value !== "123456") {
        callback(new Error("验证码错误"));
      } else {
        callback();
      }
    },
    getElementWidth() {
      this.$nextTick(() => {
        var width = this.$refs.Rtop.$el.clientWidth;
        this.Rtop1 = width + 50;
      });
    },
    iconClick(index) {
      // 搜索的显示
      if (index == 1) {
        // this.isSearchTrue = !this.isSearchTrue
      } else if (index == 2) {
        // 检查 localStorage 中是否存在 token
        if (localStorage.getItem("access_token")) {
          // token 存在
          this.isCommand = true;
        } else {
          // token 不存在
          this.isCommand = false;
          uni.navigateTo({
            url: "/pages/Login/Login",
          });
        }
      } else if (index == 3) {
        console.log("帮助");
      }
    },
    // 修改获取退出按钮
    handleCommand(int) {
      if (int == 1) {
        uni.navigateTo({
          url: "/pages/changePassword/changePassword",
        });
      } else if (int == 2) {
        uni.showModal({
          // 询问用户是否退出登录
          title: "退出登录",
          content: "您确定要退出登录吗?",
          success: (res) => {
            if (res.confirm) {
              // 退出接口
              getlogout().then((res) => {
                //确定退出拿到token并清除token
                let TOKEN = uni.getStorageSync("缓存名称");
                uni.clearStorageSync();
                //退出成功！并跳转到其他页面
                this.$message.success("退出成功");
                uni.reLaunch({
                  url: "/pages/Login/Login",
                });
              });
            }
          },
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
   .search-logo {
      width: .34rem;
      /* logo图标的宽度 */
      height: .34rem;
      /* logo图标的高度 */
      margin-left: 10rpx;
      /* 与输入框之间的间距 */
      cursor: pointer;
      background-image: url(@/static/image/search.svg);
      background-size: 100% 100%;
   }
.search-logo {
  width: 0.34rem;
  /* logo图标的宽度 */
  height: 0.34rem;
  /* logo图标的高度 */
  margin-left: 10rpx;
  /* 与输入框之间的间距 */
  cursor: pointer;
  background-image: url(@/static/image/search.svg);
  background-size: 100% 100%;
}

   /*
/*
   在屏幕宽度超过 1440px 时的样式设置 */
   /* @media screen and (min-width: 1441px) {
/* @media screen and (min-width: 1441px) {
      ::v-deep .el-card {
         top: 60% !important;
      }
@@ -356,353 +413,354 @@
         height: 2.5rem !important;
      }
   } */
   @media screen and (min-width:2560px)and (max-width:3840px) {
      .Ttop {
         margin-bottom: .7rem !important;
         margin-top: .3rem !important;
      }
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  .Ttop {
    margin-bottom: 0.7rem !important;
    margin-top: 0.3rem !important;
  }

      .login {
         width: .52rem !important;
         height: .52rem !important;
      }
  .login {
    width: 0.52rem !important;
    height: 0.52rem !important;
  }

      .LoginBg {
         margin: 0 !important;
         height: .3rem !important;
      }
  .LoginBg {
    margin: 0 !important;
    height: 0.3rem !important;
  }

      ::v-deep .Bbar img {
         width: .52rem !important;
         height: .52rem !important;
      }
  ::v-deep .Bbar img {
    width: 0.52rem !important;
    height: 0.52rem !important;
  }

      ::v-deep .el-card {
         top: 90% !important;
         padding: 0 !important;
      }
  ::v-deep .el-card {
    top: 90% !important;
    padding: 0 !important;
  }

      ::v-deep .el-card__body {
         padding: .25rem .5rem !important;
      }
  ::v-deep .el-card__body {
    padding: 0.25rem 0.5rem !important;
  }

      .Search ::v-deep .flex-center {
         height: 80% !important;
      }
  .Search ::v-deep .flex-center {
    height: 80% !important;
  }

      ::v-deep .searchBg {
         width: .35rem;
         height: .35rem;
         margin-right: .03rem;
      }
  ::v-deep .searchBg {
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.03rem;
  }

      ::v-deep .ffff {
         border-radius: .3rem !important;
      }
  ::v-deep .ffff {
    border-radius: 0.3rem !important;
  }

      ::v-deep .searchBg {
         border-radius: inherit !important;
      }
  ::v-deep .searchBg {
    border-radius: inherit !important;
  }

      ::v-deep .uni-input-placeholder {
         font-size: .14rem;
         height: 100%;
         display: flex;
         align-content: center;
         align-items: center;
      }
  ::v-deep .uni-input-placeholder {
    font-size: 0.14rem;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }

      ::v-deep .el-form {
         padding-left: .1rem !important;
      }
  ::v-deep .el-form {
    padding-left: 0.1rem !important;
  }

      ::v-deep .el-form-item__error {
         font-size: .13rem !important;
      }
  ::v-deep .el-form-item__error {
    font-size: 0.13rem !important;
  }

      ::v-deep .el-input__inner {
         height: .35rem !important;
         font-size: .14rem;
      }
  ::v-deep .el-input__inner {
    height: 0.35rem !important;
    font-size: 0.14rem;
  }

      ::v-deep .el-form-item__label {
         display: flex;
         align-items: center;
         justify-content: flex-end;
         margin-right: .2rem !important;
         width: .7rem;
      }
  ::v-deep .el-form-item__label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0.2rem !important;
    width: 0.7rem;
  }

  .secretary li {
    width: 1.3rem !important;
    height: 4rem !important;

      .secretary li {
         width: 1.3rem !important;
         height: 4rem !important;
    span {
      width: 0.5rem !important;
      height: 70% !important;
      font-size: 0.25rem !important;
    }
  }

         span {
            width: .5rem !important;
            height: 70% !important;
            font-size: 0.25rem !important;
         }
      }
  .hua {
    height: 5rem !important;
  }

      .hua {
         height: 5rem !important;
      }
  .LoginTop {
    margin-bottom: 0.4rem !important;
  }

      .LoginTop {
         margin-bottom: .4rem !important;
      }
  .yzm {
    top: 15% !important;
  }

      .yzm {
         top: 15% !important;
      }
  .fff {
    width: 2.4rem !important;
    height: 4rem !important;
  }

      .fff {
         width: 2.4rem !important;
         height: 4rem !important;
      }
  .rrr {
    width: 2rem !important;
  }

      .rrr {
         width: 2rem !important;
      }
  .btn {
    margin-bottom: 0.1rem !important;
  }

      .btn {
         margin-bottom: .1rem !important;
      }
  .btn ::v-deep .el-button {
    margin-top: 0.2rem !important;
    font-size: 0.2rem !important;
    width: 100%;
    padding: 0.12rem !important;

      .btn ::v-deep .el-button {
         margin-top: 0.2rem !important;
         font-size: 0.2rem !important;
         width: 100%;
         padding: 0.12rem !important;
    span {
      font-weight: bold !important;
    }
  }

         span {
            font-weight: bold !important;
         }
      }
  .asdf {
    margin-bottom: 0.1rem !important;
  }
}

      .asdf {
         margin-bottom: .1rem !important;
      }
   }
@media screen and (min-width: 1366px) {
  .Ttop {
    margin-bottom: 0.6rem !important;
  }

   @media screen and (min-width:1366px) and (max-width:1920px) {
      .Ttop {
         margin-bottom: .6rem !important;
      }
  ::v-deep .uni-input-placeholder {
    font-size: 0.14rem;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }

      ::v-deep .uni-input-placeholder {
         font-size: .14rem;
         height: 100%;
         display: flex;
         align-content: center;
         align-items: center;
      }
  .secretary li {
    width: 1.3rem !important;
    height: 4rem !important;

      .secretary li {
         width: 1.3rem !important;
         height: 4rem !important;
    span {
      width: 0.5rem !important;
      height: 70% !important;
      font-size: 0.25rem !important;
    }
  }

         span {
            width: .5rem !important;
            height: 70% !important;
            font-size: 0.25rem !important;
         }
      }
  /* 高级搜索 */
  .Search ::v-deep .flex-center {
    height: 80% !important;
  }

      /* 高级搜索 */
      .Search ::v-deep .flex-center {
         height: 80% !important;
      }
  .Search ::v-deep .ffff {
    opacity: 0.8;
  }

      ::v-deep .searchBg {
         width: .35rem;
         height: .35rem;
         margin-right: .03rem;
      }
  .Search ::v-deep .ffff:focus-within {
    opacity: 1;
  }

      .fff {
         width: 2.4rem !important;
         height: 4rem !important;
      }
  ::v-deep .searchBg {
    width: 0.35rem;
    height: 0.35rem;
    margin-right: 0.03rem;
  }

      .rrr {
         width: 2rem !important;
      }
  .fff {
    width: 2.4rem !important;
    height: 4rem !important;
  }

      .hua {
         height: 4rem !important;
      }
   }



   .btn>>>.el-form-item__content {
      margin-left: 0 !important;
   }

   ::v-deep .el-form-item__label {
      color: #244a7b;
   }

   ::v-deep .el-input__inner {
      border: none;
      border-bottom: 1px solid #2d476a;
      border-radius: 0;
   }

   ::v-deep .el-form-item__error {
      /* display: none; */
   }
  .rrr {
    width: 2rem !important;
  }
}

   ::v-deep .input.invalid:focus {
      border-color: #2d476a !important;
   }
.btn >>> .el-form-item__content {
  margin-left: 0 !important;
}

   ::v-deep .el-input__inner:invalid {
      border-color: #2d476a !important;
   }
::v-deep .el-form-item__label {
  color: #244a7b;
}

   ::v-deep .el-form-item__label {
      padding: 0;
   }
::v-deep .el-input__inner {
  border: none;
  border-bottom: 1px solid #2d476a;
  border-radius: 0;
}

   ::v-deep .el-form-item__label {
      color: #2d476a;
   }
::v-deep .el-form-item__error {
  /* display: none; */
}

   ::v-deep .el-form-item {
      margin-bottom: 32rpx;
   }
::v-deep .input.invalid:focus {
  border-color: #2d476a !important;
}

   .ss1 {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: .34rem;
      height: .34rem;
      background-size: 100% 100%;
   }
::v-deep .el-input__inner:invalid {
  border-color: #2d476a !important;
}

   .s1 {
      background-image: url(@/static/image/search.svg);
::v-deep .el-form-item__label {
  padding: 0;
}

   }
::v-deep .el-form-item__label {
  color: #2d476a;
}

   .s2 {
      background-image: url(@/static/image/profile.svg);
   }
::v-deep .el-form-item {
  margin-bottom: 32rpx;
}

   .s3 {
      background-image: url(@/static/image/quote.svg);
      margin-right: .59rem !important;
   }
.ss1 {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 0.34rem;
  height: 0.34rem;
  background-size: 100% 100%;
}

   .container {
      background: url(@/static/image/bg1.png);
      width: 100vw;
      height: 100vh;
.s1 {
  background-image: url(@/static/image/search.svg);
}

      color: #fff;
.s2 {
  background-image: url(@/static/image/profile.svg);
}

      .repository {
         width: 100% !important;
         /* margin-top: 19px; */
         /* height: 68%; */
         display: flex;
         flex-direction: column;
         justify-content: space-around;
         align-items: center;
.s3 {
  background-image: url(@/static/image/quote.svg);
  margin-right: 0.59rem !important;
}

         .Ttop {
            margin-top: .38rem;
            margin-bottom: 1.22rem;
         }
.container {
  background: url(@/static/image/bg1.png);
  width: 100vw;
  height: 100vh;

         .r-top {
            font-size: 40rpx !important;
            margin: 10rpx 0;
         }
      }
  color: #fff;

   }
  .repository {
    width: 100% !important;
    /* margin-top: 19px; */
    /* height: 68%; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

   .login {
      width: .52rem;
      height: .52rem;
      display: inline-block;
      vertical-align: middle;
      margin-right: .2rem;
      background: url(@/static/image/logo.png) no-repeat 0 0;
      background-size: 100% 100%;
   }
    .Ttop {
      margin-top: 0.38rem;
      margin-bottom: 1.22rem;
    }

   .rrr {
      position: absolute;
      right: .53rem;
      bottom: .36rem;
      width: 2.5rem;
      height: 3.07rem;
      opacity: 1;
      background: url(@/static/image/bg4.png);
      background-size: 100% 100%;
   }
    .r-top {
      font-size: 40rpx !important;
      margin: 10rpx 0;
    }
  }
}

   .hua {
      width: 13.81rem;
      height: 5.965rem;
      position: absolute;
      background: url(@/static/image/bg3.png) no-repeat 0 0;
      background-size: 100% 100%;
   }
.login {
  width: 0.52rem;
  height: 0.52rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.2rem;
  background: url(@/static/image/logo.png) no-repeat 0 0;
  background-size: 100% 100%;
}

   /* 底部人物背景图  */
   .fff {
      background: url(@/static/image/bg2.png) no-repeat 0 0;
      background-size: 100% 100%;
      width: 2.74rem;
      height: 4.52rem;
      position: fixed;
      bottom: 0;
      z-index: 9999999999999;
      left: 0;
   }
.rrr {
  position: absolute;
  right: 0.53rem;
  bottom: 0.36rem;
  width: 2.5rem;
  height: 3.07rem;
  opacity: 1;
  background: url(@/static/image/bg4.png);
  background-size: 100% 100%;
}

   ::v-deep .uni-easyinput__content {
      border-radius: 30rpx !important;
      /* height: 52rpx; */
   }
.hua {
  width: 13.81rem;
  height: 5.965rem;
  position: absolute;
  background: url(@/static/image/bg3.png) no-repeat 0 0;
  background-size: 100% 100%;
}

/* 底部人物背景图  */
.fff {
  background: url(@/static/image/bg2.png) no-repeat 0 0;
  background-size: 100% 100%;
  width: 2.74rem;
  height: 4.52rem;
  position: fixed;
  bottom: 0;
  z-index: 9999999999999;
  left: 0;
}

   .secretary {
      /* width: 1300rpx !important; */
      /* height: 50rpx; */
      /* height: 80%; */
      /* flex-wrap: wrap; */
      padding: 0 20px;
      text-align: center;
::v-deep .uni-easyinput__content {
  border-radius: 30rpx !important;
  /* height: 52rpx; */
}

      li {
         background-color: #fff;
         color: black;
         width: 1.6rem;
         height: 4.8rem;
         display: flex;
         justify-content: center;
         flex-direction: column;
         align-items: center;
         text-align: center;
         background: #EBF4FF;
         font-weight: 600;
         margin: 0 .21rem;
         cursor: pointer;
      }
   }
.secretary {
  /* width: 1300rpx !important; */
  /* height: 50rpx; */
  /* height: 80%; */
  /* flex-wrap: wrap; */
  padding: 0 20px;
  text-align: center;

  li {
    background-color: #fff;
    color: black;
    width: 1.6rem;
    height: 4.8rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ebf4ff;
    font-weight: 600;
    margin: 0 0.21rem;
    cursor: pointer;
  }
}

::v-deep .cleanupBtn {
  right: 52px !important;
}

   /*    .Bbottom {
      display: flex;
      justify-content: center;
	
   } */
</style>
.secretary li .detailBtn {
  transition: translate 0.3s;
}
.secretary li .detailBtn:hover {
  translate: 0 -5px;
}
</style>