卷起来吧 - 自律学习平台 - 任务清单、聊天讨论、个人信息、专注学习、学情记录、积分商城

<template>
  <nav class="nav">
    <div class="nav-left">
      <h1>卷起来吧</h1>
    </div>
    <div class="nav-center">
      <em>只有自律才有自由</em>
    </div>
    <div class="nav-right">
      <template v-if="username">
        欢迎'{{username}}'登录
      </template>
      <template v-else>
        <router-link to="Left">登录  </router-link>&nbsp;
        <router-link to="Right">注册  </router-link>&nbsp;
      </template>
    </div>
  </nav>
  <div class="swiper-index">
    <MySwiper></MySwiper>
  </div>
  <div class="body-left">
    <div class="TaskList">
      <router-link to="TaskList">任务清单</router-link>
    </div>
    <div class="MyChat">
      <router-link to="MyChat">聊天讨论</router-link>
    </div>
    <div class="CloudStorage">
      <router-link to="CloudStorage">个人信息</router-link>
    </div>
    <div class="EffectiveLearning">
      <router-link to="EffectiveLearning">专注学习</router-link>
    </div>
    <div class="MyGoal">
      <router-link to="MyGoal">学情记录</router-link>
    </div>
    <div class="MyShop">
      <router-link to="MyShop">积分商城</router-link>
    </div>
  </div>
  <div class="body-right">
    <div class="Login-body">
      <router-view :key="$route.fullPath"></router-view>
    </div>
  </div>
  <footer>
    <div class="footer-left">
      <p>期待成就更好的自己</p>
    </div>
    <div class="email">
      <img src="../public/pages/wx.jpg" height="100%" width="100%" />
    </div>
    <div class="email2">
      <img src="../public/pages/qq.jpg" height="100%" width="100%" />
    </div>
    <button class="ToCall" @click="displayEmail" @mouseout="displayEmailNone">
      如果你有什么建议或者遇到了什么问题，请及时联系我们。
    </button>
  </footer>
</template>
<script>
import MySwiper from "./components/MySwiper/MySwiper.vue"

export default {
  name: 'App',
  components: {
    MySwiper
  },
  data() {
    return {
      username: ""
    }
  },
  methods: {
    displayEmail() {
      const email = document.querySelector('.email');
      const email2 = document.querySelector('.email2');
      email.style.display = 'block';
      email2.style.display = 'block';
    },
    displayEmailNone() {
      const email = document.querySelector('.email');
      email.style.display = 'none';
      const email2 = document.querySelector('.email2');
      email2.style.display = 'none';
    }
  }
}

</script>
<style scoped>

*{
  text-decoration: none;
}
/*html{*/
/*  width:100%;*/
/*  height:100%;*/
/*  overflow-x:hidden;*/
/*  overflow-y:auto}*/
.nav{
  position: relative;
  margin-left: 50px;
  height: 100px;
  width: 1800px;
  background: linear-gradient(to bottom right, rgba(46, 196, 137, 0.8), rgba(15, 147, 182, 0.8));
  /*border-left: 5px solid rgba(72,93,166,1);*/
}

.nav-left{
  margin-left: 200px;
  margin-top:  25px;
  float: left;
}
.nav-center{
  background:transparent;
  width: 800px;
  float: left;
  margin-left: 400px;
  letter-spacing:10px;
}
.nav-center em{
  font-size: 50px;
  line-height:100px ;
}
.nav-right{
  float: right;
  margin-right: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 20px;
  /*border: 1px solid black;*/
  background:transparent;
}
.body-left>div:hover{
  font-size: 32px;
  border-left: 10px solid rgba(77,88,161,1) ;
}

.body-left{
  float: left;
  margin-top: 50px;
  margin-left: 100px;
  width: 200px;
  height: 820px;
  background: linear-gradient(to bottom right, rgba(46, 196, 137, 0.8), rgba(15, 147, 182, 0.8));
  border-radius: 20px;
}
.body-left div{
  margin-top: 80px;
  margin-left: 20px;
  text-align: center;
  font-size: 30px;
  height: 30px;
  line-height: 30px;
  width: 160px;
  background:transparent;
  border-radius: 5px;

}
/*.page{*/
/*  height: 200px;*/
/*  background-color: palegoldenrod;*/
/*}*/
.body-right{
  position: absolute;
  /*float: left;*/
  margin-top: 50px;
  margin-left: 390px;
  width: 1400px;
  height: 800px;
  border-radius: 20px;
  background: linear-gradient(to bottom right, rgba(46, 196, 137, 0.8), rgba(15, 147, 182, 0.8));
  border: 10px solid rgba(77,88,161,0.3);
}
footer{
  width: 1800px;
  margin-top: 900px;
  margin-left: 50px;
  height: 200px;
  background: linear-gradient(to bottom right, rgba(46, 196, 137, 0.8), rgba(15, 147, 182, 0.8));
}

li {
  list-style-type: none;
}
.swiper-index{

  margin-left: 50px;
  width: 1800px;
  background: linear-gradient(to bottom right, rgba(46, 196, 137, 0.8), rgba(15, 147, 182, 0.8));
}
.footer-left{
  width: 100%;
  height: 60px;

  margin-left: 600px;
}
.footer-left p{
 font-size: 60px;
  letter-spacing:30px;
}
.email{
  display: none;
  position: absolute;
  margin-top: -60px;
  margin-left: 340px;
  width: 200px;
  height: 200px;
  background-color: #fff;
}
.email2{
  display: none;
  position: absolute;
  margin-top: -60px;
  margin-left: 1500px;
  width: 200px;
  height: 200px;
  background-color: #fff;
}
.ToCall{
  position: absolute;
  background-color: transparent;
  margin-top: 60px;
  margin-left: 660px;
  border: none;
  font-size: 25px;
 border-bottom: 2px solid gray;
}

.ToCall:hover .email{
  display: block;
  background-color: #1bd5c5;
}
</style>