|
@@ -1,43 +1,58 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
+ <view class="resource" :style="{height:swiper+'px'}">
|
|
|
<statusBar :item="navBarData"></statusBar>
|
|
|
- <uni-search-bar bgColor="#f0f2f5" placeholder="搜索" cancelButton="none" clearButton="none" :focus="true"></uni-search-bar>
|
|
|
- <view class="links">
|
|
|
- <button class="link-button" :class="{ active: isActive1 }" @click="toggleActive1">资源库</button>
|
|
|
- <button class="link-button" :class="{ active: isActive2 }" @click="toggleActive2">精品课程</button>
|
|
|
+ <view class="search">
|
|
|
+ <uni-search-bar bgColor="#f0f2f5" placeholder="搜索" cancelButton="none" clearButton="none" :focus="true"></uni-search-bar>
|
|
|
</view>
|
|
|
- <view class="" v-if="tab">
|
|
|
- <uni-section type="">
|
|
|
- <uni-grid :column="2" :show-border="false" :square="false">
|
|
|
- <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
|
|
- <view class="grid-item-box">
|
|
|
- <view class="v1">
|
|
|
- <image class="image" :src="item.url" mode="aspectFill" />
|
|
|
|
|
|
- <text class="text">{{ item.text }}</text>
|
|
|
- <text class="text1">{{ item.text1 }}</text>
|
|
|
+ <view class="top">
|
|
|
+ <view class="left" @click="phoneLogin" :class="current==0?info1:info2">
|
|
|
+ <text>资源库</text>
|
|
|
+ <view :class="current==0?yun:info2"></view>
|
|
|
+ </view>
|
|
|
+ <view class="right" @click="accountLogin" :class="current==1?info1:info2">
|
|
|
+ <text>精品慕课</text>
|
|
|
+ <view :class="current==1?yun:info2"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <swiper class="scroll-view-height" :style="{height:swiper+'px'}" @change="swipeIndex" :current="current" :duration="300">
|
|
|
+ <swiper-item>
|
|
|
+ <scroll-view scroll-y="true" :style="{height:swiper-10+'px'}">
|
|
|
+ <view class="contBox">
|
|
|
+ <view class="cont" v-for="i in 10">
|
|
|
+ <image src="../../static/yym/Rectangle 1918.png" mode=""></image>
|
|
|
+ <view class="tit">
|
|
|
+ 这里是课程名称课程名称课程名称课程名称课程名称
|
|
|
+ </view>
|
|
|
+ <view class="teacher">
|
|
|
+ 主讲老师:舒某某{{swiper}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-grid-item>
|
|
|
- </uni-grid>
|
|
|
- </uni-section>
|
|
|
- </view>
|
|
|
- <view class="" v-else>
|
|
|
- <uni-section type="">
|
|
|
- <uni-grid :column="2" :show-border="false" :square="false">
|
|
|
- <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
|
|
|
- <view class="grid-item-box">
|
|
|
- <view class="v1">
|
|
|
- <image class="image" :src="item.url" mode="aspectFill" />
|
|
|
-
|
|
|
- <text class="text">{{ item.text }}1</text>
|
|
|
- <text class="text1">{{ item.text1 }}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ </swiper-item>
|
|
|
+
|
|
|
+ <swiper-item>
|
|
|
+ <scroll-view scroll-y="true" :style="{height:swiper-10+'px'}">
|
|
|
+ <view class="contBox">
|
|
|
+ <view class="cont" v-for="i in 10">
|
|
|
+ <image src="../../static/yym/Rectangle 1918.png" mode=""></image>
|
|
|
+ <view class="tit">
|
|
|
+ 这里是课程名称课程名称课程名称课程名称课程名称
|
|
|
+ </view>
|
|
|
+ <view class="teacher">
|
|
|
+ 主讲老师:舒某某{{swiper}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-grid-item>
|
|
|
- </uni-grid>
|
|
|
- </uni-section>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -45,59 +60,23 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- navBarData: {
|
|
|
- title: '资源库',
|
|
|
- btn: 1
|
|
|
- },
|
|
|
+ navBarData: {
|
|
|
+ title: '资源库',
|
|
|
+ btn: 0
|
|
|
+ },
|
|
|
|
|
|
- isActive1: true,
|
|
|
- isActive2: false,
|
|
|
- tab: true,
|
|
|
+ current:0,//登录方式切换
|
|
|
+
|
|
|
+ info1:'info1', //类名
|
|
|
+ info2:'info2',
|
|
|
+ yun:'yun',
|
|
|
+
|
|
|
+ isOK:false, //用户协议是否勾选
|
|
|
+ swiper:0
|
|
|
|
|
|
- list: [
|
|
|
- {
|
|
|
- url: ' ../../static/resource/jqr.png',
|
|
|
- text: '这里是课程名称课程名称课程名称...',
|
|
|
- badge: '0',
|
|
|
- text1: '主讲教师:苏某某'
|
|
|
- },
|
|
|
- {
|
|
|
- url: ' ../../static/resource/jqr.png',
|
|
|
- text: '这里是课程名称课程名称课程名称...',
|
|
|
- badge: '0',
|
|
|
- text1: '主讲教师:苏某某'
|
|
|
- },
|
|
|
- {
|
|
|
- url: ' ../../static/resource/jqr.png',
|
|
|
- text: '这里是课程名称课程名称课程名称...',
|
|
|
- badge: '0',
|
|
|
- text1: '主讲教师:苏某某'
|
|
|
- },
|
|
|
- {
|
|
|
- url: ' ../../static/resource/jqr.png',
|
|
|
- text: '这里是课程名称课程名称课程名称...',
|
|
|
- badge: '0',
|
|
|
- text1: '主讲教师:苏某某'
|
|
|
- },
|
|
|
- {
|
|
|
- url: ' ../../static/resource/jqr.png',
|
|
|
- text: '这里是课程名称课程名称课程名称...',
|
|
|
- badge: '0',
|
|
|
- text1: '主讲教师:苏某某'
|
|
|
- },
|
|
|
- {
|
|
|
- url: ' ../../static/resource/jqr.png',
|
|
|
- text: '这里是课程名称课程名称课程名称...',
|
|
|
- badge: '0',
|
|
|
- text1: '主讲教师:苏某某'
|
|
|
- },
|
|
|
- {
|
|
|
- url: ' ../../static/resource/jqr.png',
|
|
|
- text: '这里是课程名称课程名称课程名称...',
|
|
|
- badge: '0',
|
|
|
- text1: '主讲教师:苏某某'
|
|
|
- }
|
|
|
- ]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -110,87 +89,113 @@ export default {
|
|
|
this.isActive1 = false;
|
|
|
this.isActive2 = true;
|
|
|
this.tab = false;
|
|
|
+ },
|
|
|
+ swipeIndex(index){
|
|
|
+ this.current=index.detail.current;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ uni.createSelectorQuery().select('.uni-tabbar').boundingClientRect((rect) => {
|
|
|
+ if (rect) {
|
|
|
+ const tabBarHeight = rect.height;
|
|
|
+ console.log('底部导航栏高度:', tabBarHeight);
|
|
|
+ }
|
|
|
+ }).exec();
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // console.log(this.screenHeight);
|
|
|
+ // console.log(this.navheight);
|
|
|
+ console.log(this.tabBarHeight);
|
|
|
+ if(this.navheight){
|
|
|
+ this.swiper=this.screenHeight-this.navheight-100
|
|
|
+ }else{
|
|
|
+ this.swiper=this.screenHeight-this.customBar-150
|
|
|
}
|
|
|
+ // log
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-uni-search-bar {
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-.uni-section .uni-section-header__decoration {
|
|
|
- background-color: transparent;
|
|
|
-}
|
|
|
-.links {
|
|
|
- display: flex;
|
|
|
- justify-content: space-evenly;
|
|
|
- align-items: center;
|
|
|
- margin-top: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.link-button {
|
|
|
- border: none;
|
|
|
- color: #c2c2c2;
|
|
|
-}
|
|
|
-.link-button:after {
|
|
|
- border: none;
|
|
|
-}
|
|
|
-.link-button.active {
|
|
|
- color: #616366;
|
|
|
- // background: url('../../static/resouce/bg.png') no-repeat;
|
|
|
- background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), url('../../static/resource/bg.png') no-repeat;
|
|
|
- background-position: 50% 95%;
|
|
|
- background-size: 85%;
|
|
|
- // box-shadow: 0px 5px 5px skyblue;
|
|
|
-}
|
|
|
-.image {
|
|
|
- width: 150px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.text {
|
|
|
- font-weight: 600;
|
|
|
- max-width: 120px;
|
|
|
- font-size: 14px;
|
|
|
- margin-top: 5px;
|
|
|
-}
|
|
|
-.text1 {
|
|
|
- margin-top: 5px;
|
|
|
- color: #999999;
|
|
|
- max-width: 120px;
|
|
|
- font-size: 10px;
|
|
|
-}
|
|
|
-.grid-dynamic-box {
|
|
|
- margin-bottom: 15px;
|
|
|
-}
|
|
|
-.uni-grid-item {
|
|
|
- height: 160px;
|
|
|
-}
|
|
|
-.grid-item-box {
|
|
|
- flex: 1;
|
|
|
- // position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- padding: 10px 0;
|
|
|
- height: 160px;
|
|
|
- .v1 {
|
|
|
+
|
|
|
+.resource{
|
|
|
+ // background-color: #4a97f2;
|
|
|
+ // padding-bottom: 50px;
|
|
|
+ // margin-bottom: 50px;
|
|
|
+ .search{
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ }
|
|
|
+ .top{
|
|
|
+ // width: 500rpx;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- height: 160px;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: auto;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 10px 150rpx;
|
|
|
+ // margin-bottom: 40px;
|
|
|
+ font-size: 18px;
|
|
|
+ // padding-top: 0;
|
|
|
+ .info1{
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ .yun{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 0rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ box-shadow: 0px 0px 10px 2px #4a97f2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info2{
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view-height{
|
|
|
+ // background-color: ;
|
|
|
+ // height: 68vh;
|
|
|
+ // background-color: red;
|
|
|
+ // padding-bottom: 50px;
|
|
|
+ .contBox{
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 30rpx;
|
|
|
+ // height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ // background-color: greenyellow;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ .cont{
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 320rpx;
|
|
|
+ padding: 20rpx 15rpx;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ .tit{
|
|
|
+ width: 90%;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space:normal;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp:2;/*设置 需要显示的行数*/
|
|
|
+ }
|
|
|
+ .teacher{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.grid-item-box-row {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- padding: 15px 0;
|
|
|
-}
|
|
|
</style>
|