profile.vue

<template>
  <div class="app-container">
    <div class="left">
      <div>
        <img src="../../assets/images/evue-logo.png" />
        <h3>EVUE</h3>
      </div>
      <ul>
        <li
          v-for="(item, index) in navList"
          :key="index"
          @click="updateNav(index)"
          :class="navIndex == index ? 'active' : ''"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div v-show="navIndex === 0" class="right">
      <p class="title">个人中心</p>
      <div class="content">
        <div>
          <img src="../../assets/images/evue-logo.png" />
          <input type="button" value="更换头像" />
          <p>昵称：<input type="text" placeholder="请输入昵称" /></p>
          <p>
            性别：<input
              type="radio"
              name="gender"
              value="男"
              id="male"
            /><label for="male">男</label>
            <span
              style="width: 20px; height: 10px; display: inline-block"
            ></span>
            <input type="radio" name="gender" value="女" id="female" /><label
              for="female"
              >女</label
            >
          </p>
          <p>
            <button>修改</button>
          </p>
        </div>
      </div>
    </div>
    <div v-show="navIndex === 1" class="right">
      <p class="title">消息中心</p>
      <div class="content">
        <img src="../../assets/images/no-message.png" />
        <h3 class="tip-text">暂无消息</h3>
        <ul class="message-list">
          <li>
            <p>
              <span>EVUE</span><span>2020-02-02 20:20:20</span
              ><span>审核消息</span>
            </p>
            <p>
              法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
            </p>
          </li>
          <li>
            <p>
              <span>EVUE</span><span>2020-02-02 20:20:20</span
              ><span>留言消息</span>
            </p>
            <p>
              法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div v-show="navIndex === 2" class="right">
      <p class="title">上传应用</p>
      <div class="content">
        <form @submit.prevent="false">
          <h4>小程序 名称</h4>
          <p>
            <input type="text" placeholder="请输入小程序名称" />
          </p>
          <h4>小程序 作者</h4>
          <p>
            <input type="text" placeholder="请输入小程序作者" />
          </p>
          <h4>小程序 ICON/二维码</h4>
          <div class="icon-list">
            <div>
              <input type="file" />
              <span>上传ICON</span>
            </div>
            <div>
              <input type="file" />
              <span>上传小程序码</span>
            </div>
            <div>
              <input type="file" />
              <span>上传公众号二维码</span>
            </div>
          </div>
          <h4>小程序 介绍</h4>
          <textarea placeholder="请输入小程序介绍"></textarea>
          <h4>小程序 分类</h4>
          <div>
            <select>
              <option>一一一一一</option>
              <option>二二二二二</option>
              <option>三三三三三</option>
            </select>
          </div>
          <h4>小程序 截图</h4>
          <div class="app-screenshot">
            <input type="file" />
          </div>
          <h4>联系微信</h4>
          <p>
            <input type="text" placeholder="请输入联系微信" />
          </p>
          <h4>联系手机号</h4>
          <p>
            <input type="number" placeholder="请输入手机号" />
          </p>
          <h4>运营者</h4>
          <p>
            <input type="text" placeholder="请输入运营者姓名" />
          </p>
          <p class="btn">
            <button>提交申请</button>
          </p>
        </form>
      </div>
    </div>
    <div v-show="navIndex === 3" class="right">
      <p class="title">应用中心</p>
      <div class="content">
        <ul class="app-list">
          <li>
            <img src="../../assets/images/evue-logo.png" />
            <div>
              <p>
                <span>应用程序名称</span>
                <span>应用版本号</span>
                <span>提交时间</span>
                <span>查看详情<i class="iconfont icon-jiantouyou"></i></span>
              </p>
              <p>应用描述</p>
            </div>
          </li>
          <li>
            <img src="../../assets/images/evue-logo.png" />
            <div>
              <p>
                <span>应用程序名称</span>
                <span>应用版本号</span>
                <span>提交时间</span>
                <span>查看详情<i class="iconfont icon-jiantouyou"></i></span>
              </p>
              <p>应用描述</p>
            </div>
          </li>
          <li>
            <img src="../../assets/images/evue-logo.png" />
            <div>
              <p>
                <span>应用程序名称</span>
                <span>应用版本号</span>
                <span>提交时间</span>
                <span>查看详情<i class="iconfont icon-jiantouyou"></i></span>
              </p>
              <p>应用描述</p>
            </div>
          </li>
        </ul>
        <ul class="pagination">
          <li><a href="#">«</a></li>
          <li><a href="#">1</a></li>
          <li><a class="active" href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">»</a></li>
        </ul>
      </div>
    </div>
    <div v-show="navIndex === 4" class="right">
      <p class="title">联系我们</p>
      <div class="content">
        <p class="company">武汉市字节码科技有限公司</p>
        <div class="company-desc">
          武汉市字节码科技有限公司是一家专业从事物联网底层核心技术及解决方案研发的创新企业，团队核心成员来自国内顶尖的操作系统团队deepin，深耕物联网和操作系统等底层核心技术，具有十余年丰富的产品研发经验。
        </div>
        <ul class="company-basic">
          <li>
            <!-- <img src="../../assets/images/evue-logo.png" /> -->
            <p><i class="iconfont icon-dizhi"></i></p>
            <h4>联系地址</h4>
            <p>武汉市洪山区民族大道紫菘枫尚国际大厦1109室</p>
          </li>
          <li>
            <!-- <img src="../../assets/images/evue-logo.png" /> -->
            <p><i class="iconfont icon-weixin"></i></p>
            <h4>微信：丁总</h4>
            <p>dragondjf</p>
          </li>
          <li>
            <!-- <img src="../../assets/images/evue-logo.png" /> -->
            <p><i class="iconfont icon-youxiang"></i></p>
            <h4>联系邮箱</h4>
            <p>scriptiot@aliyun.com</p>
          </li>
        </ul>
      </div>
    </div>
    <div v-show="navIndex === 5" class="right">
      <p class="title">设备绑定</p>
      <div class="content">
        <img src="../../assets/images/device.png" />
        <h3 class="tip-text">暂无设备</h3>
        <ul class="device-list">
          <li>
            <img src="../../assets/images/watch.png" />
            <div>
              <p><span>EVUE</span><span>2020-02-02 20:20:20</span></p>
              <p>
                法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
              </p>
            </div>
          </li>
          <li>
            <img src="../../assets/images/watch.png" />
            <div>
              <p><span>EVUE</span><span>2020-02-02 20:20:20</span></p>
              <p>
                法大师傅撒旦艰苦弗兰克迪斯科飞机但是附近的深刻理解发生的发的时刻了
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-show="navIndex === 6" class="right">
      <p class="title">我的账号</p>
      <div class="content">
        <div class="update-password">
          <p>旧密码：<input type="password" placeholder="请输入旧密码" /></p>
          <p>新密码：<input type="password" placeholder="请输入新密码" /></p>
          <button>修改密码</button>
        </div>
        <div class="logout">
          <button>退出账号</button>
        </div>
      </div>
    </div>
    <div v-show="navIndex === 7" class="right">
      <p class="title">开放接口</p>
      <div class="content">
        <div style="width: 100%; height: auto">
          <p><input type="text" disabled placeholder="接口密钥" /></p>
          <p><button style="width: auto;height: auto;">生成密钥</button></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AppProfile",
  components: {},
  data() {
    return {
      navList: [
        "个人资料",
        "消息中心",
        "发布应用",
        "我的发布",
        "联系我们",
        "设备绑定",
        "我的账号",
        "开放接口",
      ],
      navIndex: 0,
    };
  },
  computed: {},
  methods: {
    updateNav(index) {
      this.navIndex = index;
    },
  },
  beforeMount() {},
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-direction: row;
  margin: 20px 0px;
  & > div.left {
    width: 250px;
    box-shadow: 0px 0px 1px #cccccc;
    & > div {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      & > img {
        width: 100px;
        height: 100px;
        display: block;
        border-radius: 50%;
      }
    }
    & > ul {
      & > li {
        cursor: pointer;
        padding: 15px 0px;
        text-align: center;
        font-size: 15px;
        border-bottom: 1px solid #f0f0f0;
        transition: all 0.5s;
        &.active {
          border-left: 3px solid #4cd1e0;
        }
        &:hover {
          color: #4cd1e0;
        }
      }
    }
  }
  & > div.right {
    flex: 1;
    margin-left: 20px;
    box-shadow: 0px 0px 1px #cccccc;
    transition: all 0.5s;
    & > p.title {
      margin: 0px;
      padding: 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    & > div.content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px;
      & > div {
        & > img {
          width: 120px;
          height: 120px;
          display: block;
          margin: 20px auto;
        }
        & > input[type="button"] {
          display: block;
          cursor: pointer;
          width: 150px;
          height: auto;
          margin: 20px auto;
          font-size: 14px;
          background: none;
          padding: 5px 15px;
          border: 1px solid #f0f0f0;
        }
        & > p {
          margin: 15px;
          & > button {
            cursor: pointer;
            width: 100%;
            padding: 5px 15px;
            font-size: 14px;
          }
        }
      }
      & > h3.tip-text {
        margin: 0px;
        color: #cccccc;
      }
      & > ul.message-list {
        flex: 1;
        width: 100%;
        & > li {
          margin: 10px;
          & > p {
            font-size: 14px;
          }
          & > p:first-child {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            & > span:nth-child(2) {
              color: grey;
            }
            & > span:nth-child(3) {
              color: #4cd1e0;
              font-size: 13px;
            }
          }
        }
      }
      & > ul.device-list {
        width: 100%;
        & > li {
          display: flex;
          flex-direction: row;
          & > img {
            display: block;
            width: 80px;
            height: 80px;
          }
          & > div {
            flex: 1;
            font-size: 14px;
            & > p:first-child {
              font-size: 14px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              & > span:last-child {
                color: grey;
                font-size: 12px;
              }
            }
          }
        }
      }
      & > ul.app-list {
        width: 100%;
        height: auto;
        & > li {
          display: flex;
          flex-direction: row;
          padding: 10px 0px;
          border-bottom: 1px solid #f0f0f0;
          & > img {
            width: 80px;
            height: 80px;
            display: block;
          }
          & > div {
            flex: 1;
            margin-left: 10px;
            & > p:first-child {
              display: flex;
              font-size: 14px;
              flex-direction: row;
              justify-content: space-between;
              & > span:last-child {
                color: #4cd1e0;
                cursor: pointer;
                font-size: 14px;
              }
            }
            & > p:last-child {
              color: grey;
              font-size: 13px;
            }
          }
        }
      }
      & > ul.pagination {
        display: inline-block;
        padding: 0;
        margin: 0;
        & > li {
          display: inline;
          & > a {
            color: black;
            font-size: 13px;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            &:hover {
              color: #ffffff;
              background: #4cd1e0;
            }
          }
        }
      }
      & > p.company {
        font-size: 20px;
        text-align: center;
      }
      & > div.company-desc {
        font-size: 14px;
        text-indent: 2em;
        color: #808080;
        line-height: 24px;
      }
      & > ul.company-basic {
        display: flex;
        flex-direction: row;
        & > li {
          width: 33.3333%;
          margin: 10px;
          & > img {
            display: block;
            width: 100px;
            height: 100px;
            margin: 20px auto;
          }
          & > h4 {
            text-align: center;
          }
          & > p {
            font-size: 14px;
            color: #808080;
            text-align: center;
            & > i {
              color: #4cd1e0;
              font-size: 60px;
            }
          }
        }
      }
      & > form {
        flex: 1;
        width: 100%;
        & > h4 {
          font-size: 16px;
          color: #303030;
          margin-top: 30px;
          margin-bottom: 18px;
        }
        & > p {
          input {
            width: 100%;
            height: 34px;
            margin: 0px;
            padding: 0 10px;
            font-size: 14px;
            border: 1px solid #e5e5e5;
            box-sizing: border-box;
          }
        }
        & > p.btn {
          text-align: center;
          & > button {
            cursor: pointer;
            color: #ffffff;
            font-size: 14px;
            padding: 10px 45px;
            min-width: 100px;
            border: none;
            background: #4cd1e0;
          }
        }
        & > div.app-screenshot {
          & > input[type="file"] {
            width: 210px;
            height: 100px;
            padding: 10px;
            font-size: 14px;
            color: #cccccc;
            text-align: center;
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px dashed #4cd1e0;
          }
        }
        & > div.icon-list {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          & > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            & > span {
              color: #4cd1e0;
              margin: 10px 0px 0px 0px;
              font-size: 13px;
            }
            & > input[type="file"] {
              width: 210px;
              height: 100px;
              padding: 10px;
              font-size: 14px;
              color: #cccccc;
              text-align: center;
              display: inline-flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              border: 1px dashed #4cd1e0;
            }
          }
        }
        & > textarea {
          width: 100%;
          height: 100px;
          resize: none;
          padding: 10px;
          font-size: 14px;
        }
      }
      & > div.update-password {
        width: 100%;
        margin: 20px 0px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
        & > p {
          margin: 5px 0px;
          font-size: 14px;
        }
        & > button {
          cursor: pointer;
          color: #ffffff;
          font-size: 14px;
          padding: 6px 25px;
          min-width: 100px;
          border: none;
          background: #4cd1e0;
        }
      }
      & > div.logout {
        width: 100%;
        margin: 20px 0px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
        & > button {
          cursor: pointer;
          color: #ffffff;
          font-size: 14px;
          padding: 6px 25px;
          min-width: 100px;
          border: none;
          background: #4cd1e0;
        }
      }
    }
  }
}
</style>