|
|
@@ -2,7 +2,7 @@
|
|
|
<div style="height:100%">
|
|
|
<Header></Header>
|
|
|
<div class="container">
|
|
|
- <div class="container-left">
|
|
|
+ <div class="container-left" :style="leftShow ? {width:0}:{width:'240px'}">
|
|
|
<div :class="activeIndex == 0 ? 'container-left-top active' : 'container-left-top'" @click="activeIndex = 0">
|
|
|
<img class="icon-img" :src="activeIndex == 0 ? img1 : img11" alt="教学中心" />教学中心
|
|
|
</div>
|
|
|
@@ -26,8 +26,11 @@
|
|
|
应用精选</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
+ <div class="container-left-show" :style="leftShow ? {width:'35px'}:{width:'240px'}" @click="leftShow = !leftShow">
|
|
|
+ <img :src="shows" alt="">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="main" v-if="activeIndex == 0">
|
|
|
+ <div class="main" :style="leftShow ? {width:'100%'}:''" v-if="activeIndex == 0">
|
|
|
<!-- <BannerVue></BannerVue> -->
|
|
|
<CourseSelect></CourseSelect>
|
|
|
<resource></resource>
|
|
|
@@ -73,6 +76,7 @@ import img2 from '@/assets/icon/2.png'
|
|
|
import img3 from '@/assets/icon/up.png'
|
|
|
import down from '@/assets/icon/down.png'
|
|
|
import info from '@/assets/icon/info.png'
|
|
|
+import shows from '@/assets/icon/show.png'
|
|
|
import BannerVue from '@/components/main/banner.vue'
|
|
|
import CourseSelect from '@/components/main/courseSelect.vue'
|
|
|
import resource from '@/components/main/resource.vue';
|
|
|
@@ -96,6 +100,7 @@ const loading = ref(false)
|
|
|
const iframeRef1Url = ref('')
|
|
|
const iframeRef2Url = ref('')
|
|
|
const iframeRef2Dialog = ref(true)
|
|
|
+const leftShow = ref(false)
|
|
|
|
|
|
watchEffect(() => {
|
|
|
// console.log('111111111111',CurrentRole, user.user)
|
|
|
@@ -143,6 +148,9 @@ const copyEmail = () => {
|
|
|
console.error('复制失败:', error);
|
|
|
});
|
|
|
}
|
|
|
+const show = () => {
|
|
|
+ console.log('show')
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.container {
|
|
|
@@ -152,10 +160,10 @@ const copyEmail = () => {
|
|
|
|
|
|
.container-left {
|
|
|
height: calc(100vh - 60px);
|
|
|
- width: 200px;
|
|
|
+ width: 240px;
|
|
|
background: #fff;
|
|
|
overflow: hidden;
|
|
|
- margin-top: 15px;
|
|
|
+ padding-top: 15px;
|
|
|
|
|
|
.container-left-top {
|
|
|
margin: 0 10px 0 10px;
|
|
|
@@ -165,6 +173,7 @@ const copyEmail = () => {
|
|
|
padding: 10px 0 10px 40px;
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
+ transition: all 0.7s ease 0ms;
|
|
|
|
|
|
.icon-img {
|
|
|
position: absolute;
|
|
|
@@ -175,7 +184,7 @@ const copyEmail = () => {
|
|
|
.up {
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
- left: 110px;
|
|
|
+ left: 140px;
|
|
|
}
|
|
|
|
|
|
div {
|
|
|
@@ -185,12 +194,23 @@ const copyEmail = () => {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+ .container-left-show{
|
|
|
+ width: 240px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ border: 1px solid #E7E7E7;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.main {
|
|
|
background: #F0F2F5;
|
|
|
padding: 20px 10%;
|
|
|
- width: calc(100% - 200px);
|
|
|
+ width: calc(100% - 240px);
|
|
|
height: calc(100vh - 60px);
|
|
|
overflow: auto;
|
|
|
}
|
