| | |
| | | <div class="header" :class="{ showBox: isShow, disOpacity: !opacity }"> |
| | | <!-- 右侧 --> |
| | | <div class="left"> |
| | | <img class="logo" src="/images/index/LOGO.png" alt="" /> |
| | | <div class="title">工业物联网平台</div> |
| | | <div class="label"><router-link to="/">首页</router-link></div> |
| | | <router-link to="/"> |
| | | <img class="logo" src="/images/index/LOGO.png" alt="" /> |
| | | </router-link> |
| | | <div class="title" @click="$router.push('/')">工业物联网平台</div> |
| | | <div class="label" @click="$router.push('/')">首页</div> |
| | | <div class="label">云服务</div> |
| | | <div class="label"> |
| | | <router-link to="/equipmentManagement">管理中心</router-link> |
| | | </div> |
| | | <div class="label">应用商城</div> |
| | | <div class="label" @click="$router.push('/manageCenter')">管理中心</div> |
| | | <div class="label" @click="$router.push('/product')">应用商城</div> |
| | | </div> |
| | | |
| | | <!-- 左侧 --> |
| | |
| | | placeholder="请输入关键词" |
| | | v-model="keyWord" |
| | | @focus="showInputBox(true)" |
| | | :class="{ Unlogin: !userInfo }" |
| | | > |
| | | <div class="iconList" slot="suffix"> |
| | | <i class="search iconfont" v-if="!isShow"></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> |
| | | |
| | | <!-- 已登录情况 --> |
| | |
| | | <div class="label">余额</div> |
| | | <div class="content"> |
| | | <span class="button">充值</span> |
| | | <span class="number">¥4900.82</span> |
| | | <span class="number">¥0</span> |
| | | </div> |
| | | </li> |
| | | |
| | |
| | | </li> |
| | | |
| | | <li> |
| | | <div class="label">订单管理</div> |
| | | <div class="label"> |
| | | <router-link to="/personalCenter">订单管理</router-link> |
| | | </div> |
| | | </li> |
| | | |
| | | <li> |
| | |
| | | </li> |
| | | |
| | | <li> |
| | | <div class="label">管理中心</div> |
| | | <div class="label"> |
| | | <router-link to="/manageCenter">管理中心</router-link> |
| | | </div> |
| | | </li> |
| | | </ul> |
| | | <div class="logOut" @click="logOut">退出登录</div> |
| | | </div> |
| | | |
| | | <!-- 输入下拉框 --> |
| | | <div class="inputBox" v-if="isShowBox"> |
| | | <div class="inputBox" :class="{ Unlogin: !userInfo }" v-if="isShowBox"> |
| | | <div class="hotKey"> |
| | | <div class="title">热门搜索</div> |
| | | <ul class="keyCard"> |
| | |
| | | |
| | | .logo { |
| | | margin: 0 7px 0 20px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .title { |
| | | margin-right: 10px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .label { |
| | |
| | | &.showBox .right .el-input { |
| | | position: absolute; |
| | | z-index: 4; |
| | | top: 0; |
| | | right: 158px; |
| | | top: -7px; |
| | | right: 88px; |
| | | width: 300px; |
| | | background-color: #fff; |
| | | |
| | | &.Unlogin { |
| | | right: 158px; |
| | | } |
| | | |
| | | ::v-deep input { |
| | | width: 300px; |
| | | background-color: #fff; |
| | |
| | | box-sizing: border-box; |
| | | position: absolute; |
| | | top: 62px; |
| | | right: 158px; |
| | | right: 88px; |
| | | padding: 12px 20px 8px 20px; |
| | | width: 300px; |
| | | background-color: #fff; |
| | | border-top: 1px solid rgb(204, 204, 204); |
| | | z-index: 4; |
| | | |
| | | &.Unlogin { |
| | | top: 52px; |
| | | right: 158px; |
| | | } |
| | | |
| | | .hotKey, |
| | | .historyKey { |
| | |
| | | .logOut { |
| | | margin-top: 20px; |
| | | font-size: 16px; |
| | | color: #0065ff; |
| | | color: #3d3d3d; |
| | | cursor: pointer; |
| | | |
| | | &:hover { |
| | | color: #0065ff; |
| | | } |
| | | } |
| | | } |
| | | </style> |