|
|
@@ -2,46 +2,113 @@
|
|
|
<view class="video-list-page">
|
|
|
<van-sticky style="background: #fff">
|
|
|
<view class="flex search-wrap">
|
|
|
- <van-search
|
|
|
- shape="round"
|
|
|
- :value="searchVal"
|
|
|
- placeholder="关键词搜索"
|
|
|
- @change="searchValChange"
|
|
|
- @search="onSearch"
|
|
|
- @clear="onClearSearch"
|
|
|
- clear-trigger="always"
|
|
|
- style="flex:1"
|
|
|
- />
|
|
|
- <image
|
|
|
- src="@/static/chart/menu.png"
|
|
|
- mode="widthFix"
|
|
|
- class="menu-icon"
|
|
|
- @click="showFilter=true"
|
|
|
- />
|
|
|
+ <view @click="goSearchPage" style="flex:1;margin-right:30rpx" >
|
|
|
+ <searchBox
|
|
|
+ placeholder="关键字搜索"
|
|
|
+ :hasRightBtn="false"
|
|
|
+ :disabled="true"
|
|
|
+ ></searchBox>
|
|
|
+ </view>
|
|
|
+ <view class="flex" @click="showFilter=true">
|
|
|
+ <image style="width:50rpx;height:50rpx" src="@/static/filter-icon.png" mode="aspectFill"/>
|
|
|
+ <text style="color:#E3B377;font-size:32rpx">筛选</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</van-sticky>
|
|
|
- <video
|
|
|
- enable-auto-rotation
|
|
|
- src="https://hzstatic.hzinsights.com/static/yb/video/a49d072618778809254a2a7d6e8fb4ac.mp4"
|
|
|
- ></video>
|
|
|
+ <view class="list-wrap">
|
|
|
+ <view class="item" v-for="item in 4" :key="item">
|
|
|
+ <view class="title-box">
|
|
|
+ <text class="tag">宏观</text>
|
|
|
+ <text class="title">标题</text>
|
|
|
+ </view>
|
|
|
+ <button class="share-btn" open-type="share" :data-vid="item">
|
|
|
+ <image class="share-img" src="@/static/share-icon.png" mode="aspectFill"/>
|
|
|
+ </button>
|
|
|
+ <video
|
|
|
+ object-fit="cover"
|
|
|
+ show-mute-btn
|
|
|
+ src="https://hzstatic.hzinsights.com/static/yb/video/3a593d4aa674e7caa9a830803a527722.mp4"
|
|
|
+ ></video>
|
|
|
+ <view class="time">发布时间：2022-06-30 15:52:28</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 筛选 -->
|
|
|
+ <van-popup :show="showFilter" position="bottom" :safe-area-inset-bottom="false" round @close="showFilter=false">
|
|
|
+ <view class="filter-wrap">
|
|
|
+ <view class="flex top">
|
|
|
+ <text style="color:#000">全部筛选</text>
|
|
|
+ <text style="color:#E3B377" @click="showFilter=false">取消</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-box">
|
|
|
+ <van-collapse accordion @change="change" :value="active" :border="false">
|
|
|
+ <van-collapse-item title="标题1" name='1' :border="false">
|
|
|
+ 代码是写出来给人看的，附带能在机器上运行
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item title="标题2" name='2' :border="false">
|
|
|
+ 代码是写出来给人看的，附带能在机器上运行
|
|
|
+ </van-collapse-item>
|
|
|
+ <van-collapse-item title="标题3" name='3' :border="false">
|
|
|
+ 代码是写出来给人看的，附带能在机器上运行
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-popup>
|
|
|
</view>
|
|
|
+
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ showFilter:false,
|
|
|
+ active:'1'
|
|
|
}
|
|
|
},
|
|
|
onLoad(options){
|
|
|
|
|
|
- }
|
|
|
+ },
|
|
|
+ onShareAppMessage({from,target}) {
|
|
|
+ console.log(from,target);
|
|
|
+ return {
|
|
|
+ title:`FICC【】`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goSearchPage(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/video/videoSearch',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ change(e){
|
|
|
+ this.active=e.detail
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang='scss'>
|
|
|
.search-wrap .van-search{
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
+
|
|
|
+.video-list-page{
|
|
|
+ .filter-wrap{
|
|
|
+ .van-cell__title, .van-cell__value{
|
|
|
+ flex: none !important;
|
|
|
+ }
|
|
|
+ .van-cell:after{
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
+ .van-cell__title{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .van-hairline--top:after{
|
|
|
+ border-top-width: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.video-list-page{
|
|
|
@@ -56,6 +123,71 @@ export default {
|
|
|
flex-shrink: 0;
|
|
|
margin-left: 30rpx;
|
|
|
}
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-wrap{
|
|
|
+ .item{
|
|
|
+ border-top: 10rpx solid #f9f9f9;
|
|
|
+ padding: 30rpx 34rpx;
|
|
|
+ position: relative;
|
|
|
+ .title-box{
|
|
|
+ padding-right: 40rpx;
|
|
|
+ }
|
|
|
+ .share-btn{
|
|
|
+ position: absolute;
|
|
|
+ top: 34rpx;
|
|
|
+ right: 34rpx;
|
|
|
+ background-color: transparent;
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0;
|
|
|
+ &::after{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .share-img{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .tag{
|
|
|
+ color: #E4B478;
|
|
|
+ background-color: #333;
|
|
|
+ padding: 5rpx 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-right: 26rpx;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ video{
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ margin: 30rpx 0 20rpx 0;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.filter-wrap{
|
|
|
+ background-color: #fff;
|
|
|
+ padding-top: 53rpx;
|
|
|
+ .top{
|
|
|
+ font-size: 32rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ padding: 0 34rpx;
|
|
|
+ }
|
|
|
+ .list-box{
|
|
|
+ min-height: 30vh;
|
|
|
+ max-height: 60vh;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
