| | |
| | | <router-link to="/"> |
| | | <img class="logo" src="/images/index/LOGO.png" alt="" /> |
| | | </router-link> |
| | | <router-link to="/"> |
| | | <div class="title">工业物联网平台</div> |
| | | </router-link> |
| | | <div class="label"><router-link to="/">首页</router-link></div> |
| | | <div class="label">云服务</div> |
| | | <div class="label"> |
| | | <router-link to="/manageCenter">管理中心</router-link> |
| | | </div> |
| | | <div class="label"> |
| | | <router-link to="/product">应用商城</router-link> |
| | | </div> |
| | | <div class="title" @click="$router.push('/')">工业互联网平台</div> |
| | | <div class="label" @click="$router.push('/')">首页</div> |
| | | <!-- <div class="label">云服务</div> --> |
| | | <div class="label" @click="$router.push('/manageCenter')">管理中心</div> |
| | | <div class="label" @click="$router.push('/product')">应用商城</div> |
| | | </div> |
| | | |
| | | <!-- 左侧 --> |
| | |
| | | > |
| | | <div class="iconList" slot="suffix"> |
| | | <i class="search iconfont" v-if="!isShow"></i> |
| | | <i class="search iconfont" v-if="isShow"></i> |
| | | <i class="search iconfont" @click="search" v-if="isShow" |
| | | ></i |
| | | > |
| | | <i class="del iconfont" v-if="isShow" @click="showInputBox(false)" |
| | | ></i |
| | | > |
| | |
| | | </el-input> |
| | | |
| | | <!-- 未登录情况 --> |
| | | <div class="headerLogin" v-if="!userInfo"> |
| | | <router-link to="/login"> 登录</router-link> |
| | | <div |
| | | class="headerLogin" |
| | | v-if="!userInfo" |
| | | @click="$router.push('/login')" |
| | | > |
| | | 登录 |
| | | </div> |
| | | <div class="register" v-if="!userInfo"> |
| | | <router-link to="/register"> 免费注册 </router-link> |
| | | <div |
| | | class="register" |
| | | v-if="!userInfo" |
| | | @click="$router.push('/register')" |
| | | > |
| | | 免费注册 |
| | | </div> |
| | | |
| | | <!-- 已登录情况 --> |
| | | <img |
| | | class="userImg" |
| | | src="/images/index/默认头像-01.png" |
| | | src="/images/index/8.jpg" |
| | | alt="" |
| | | v-if="userInfo" |
| | | @mouseenter="showUserBox" |
| | | @mouseleave="hiddenUserBox" |
| | | style="border-radius: 50%" |
| | | /> |
| | | </div> |
| | | </div> |
| | |
| | | > |
| | | <div class="userName">{{ userInfo.username }}</div> |
| | | <ul> |
| | | <li class="money"> |
| | | <!-- <li class="money"> |
| | | <div class="label">余额</div> |
| | | <div class="content"> |
| | | <span class="button">充值</span> |
| | | <span class="number">¥0</span> |
| | | </div> |
| | | </li> |
| | | |
| | | --> |
| | | <li class="personal"> |
| | | <div class="label"> |
| | | <router-link to="/personalCenter">个人中心</router-link> |
| | |
| | | </li> |
| | | |
| | | <li> |
| | | <div class="label"> |
| | | <router-link to="/personalCenter">订单管理</router-link> |
| | | </div> |
| | | <div class="label" @click="jump(0)">订单管理</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <!-- <li> |
| | | <div class="label">产品续费</div> |
| | | </li> |
| | | </li> --> |
| | | |
| | | <li> |
| | | <!-- <li> |
| | | <div class="label">未读消息</div> |
| | | </li> |
| | | </li> --> |
| | | |
| | | <li> |
| | | <div class="label">未支付订单</div> |
| | | <div class="label" @click="jump(0, 1)">未支付订单</div> |
| | | </li> |
| | | |
| | | <li> |
| | |
| | | <div class="hotKey"> |
| | | <div class="title">热门搜索</div> |
| | | <ul class="keyCard"> |
| | | <li class="keyItem" v-for="(item, index) in hotKeyArr" :key="index"> |
| | | <li |
| | | class="keyItem" |
| | | @click="jumpToSearch(item)" |
| | | v-for="(item, index) in hotKeyArr" |
| | | :key="index" |
| | | > |
| | | {{ item }} |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | |
| | | <div class="historyKey"> |
| | | <!-- <div class="historyKey"> |
| | | <div class="title colorLight">历史搜索</div> |
| | | |
| | | <ul class="keyCard"> |
| | |
| | | {{ item }} |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | |
| | | <!-- 遮罩层 --> |
| | |
| | | return { |
| | | keyWord: "", //输入框内容 |
| | | isShow: false, //显示下拉框 |
| | | hotKeyArr: ["算法", "智能AI", "云服务", "管理中心", "实时音视频", "短信"], //热门关键词 |
| | | hotKeyArr: ["打电话", "离岗", "睡岗", "入侵", "离岗", "安全帽"], //热门关键词 |
| | | historyKeyArr: ["云服务", "算法", "管理服务", "应用"], //历史关键词 |
| | | isShowBox: false, //输入下拉框 |
| | | userInfo: null, //用户信息 |
| | |
| | | showInputBox(toggle) { |
| | | this.isShow = toggle; |
| | | this.isShowBox = toggle; |
| | | this.keyWord = ""; |
| | | this.$emit("showInputBox", toggle); |
| | | }, |
| | | |
| | |
| | | const _this = this; |
| | | this.UserTimer = setTimeout(() => { |
| | | _this.isShowUserBox = false; |
| | | }, 100); |
| | | }, 200); |
| | | }, |
| | | |
| | | logOut() { |
| | |
| | | duration: 2500, |
| | | offset: 57, |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | jump(id, type) { |
| | | if (type) { |
| | | sessionStorage.setItem("type", type); |
| | | } |
| | | this.$router.push({ |
| | | path: "/personalCenter", |
| | | query: { |
| | | id: id, |
| | | }, |
| | | }); |
| | | }, |
| | | |
| | | search() { |
| | | this.$router.push({ |
| | | path: "/product", |
| | | query: { |
| | | keyWord: this.keyWord, |
| | | }, |
| | | }); |
| | | }, |
| | | |
| | | jumpToSearch(keyWord) { |
| | | this.$router.push({ |
| | | path: "/product", |
| | | query: { |
| | | keyWord, |
| | | }, |
| | | }); |
| | | }, |
| | | }, |
| | |
| | | |
| | | .label { |
| | | color: #3d3d3d; |
| | | &:hover { |
| | | color: #0065ff; |
| | | } |
| | | } |
| | | } |
| | | .right { |
| | |
| | | .userBox { |
| | | box-sizing: border-box; |
| | | position: absolute; |
| | | z-index: 3; |
| | | z-index: 10; |
| | | right: 20px; |
| | | top: 64px; |
| | | padding: 0 20px; |
| | | width: 240px; |
| | | height: 427px; |
| | | height: 327px; |
| | | background-color: #fff; |
| | | box-shadow: 0px 4px 12px rgba(96, 100, 106, 0.12); |
| | | border-radius: 4px; |
| | |
| | | } |
| | | |
| | | ul { |
| | | height: 300px; |
| | | height: 200px; |
| | | border-top: 1px solid #e9ebee; |
| | | border-bottom: 1px solid #e9ebee; |
| | | |