Files
medicine_app/pages/course/outline.vue
2024-06-07 15:04:50 +08:00

192 lines
3.8 KiB
Vue

<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar title="课程大纲"></z-nav-bar>
<view class="container">
<view class="imagebg">
</view>
<view class="ss" >
<view class="box">
<view class="item flexbox" @click="itemClick('jiage')">
<view class="logo">
<image class="" src="@/static/logo.png" mode="aspectFill"></image>
</view>
<view class="flexbox tt">
<view class="type">
<image src="/static/priceIcon.png" mode="widthFix"></image>
</view>
<text>课程价格 > </text>
</view>
</view>
<view class="item flexbox" @click="itemClick('shuoming')">
<view class="logo">
<image class="" src="@/static/logo.png" mode="aspectFill"></image>
</view>
<view class="flexbox tt">
<view class="type">
<image src="/static/shuomingIcon.png" mode="aspectFill"></image>
</view>
<text>课程说明 > </text>
</view>
</view>
<view class="item flexbox" @click="itemClick('jianjie')">
<view class="logo">
<image class="" src="@/static/logo.png" mode="aspectFill"></image>
</view>
<view class="flexbox tt">
<view class="type">
<image src="/static/jianjieIcon.png" mode="widthFix"></image>
</view>
<text>平台简介 > </text>
</view>
</view>
</view></view>
</view>
<z-navigation></z-navigation>
<!-- <music-play :playData="playData"></music-play> -->
</view>
</template>
<script>
// import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
// console.log(e, '------')
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
components: {
// musicPlay
},
//方法
methods: {
itemClick(op){
var path = ''
switch(op){
case "jiage":
path = '/pages/course/coursePrice'
break
case "shuoming":
path = '/pages/course/courseSet';
break;
case "jianjie":
path = '/pages/course/platformInfo';
break;
}
uni.navigateTo({
url:path
})
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.flexbox {
display: flex;
}
.imagebg{
width: 100%;
background:#fff url(@/static/pageBg.jpg) top no-repeat;
background-size:cover;
height:45vh
}
.container {
min-height: calc(100vh - 270rpx);
align-items: end !important;
position: relative; background-color: #fff;
}
.ss{@include pleft_right(10px); }
.box { overflow: hidden;
// position: absolute; left: 20rpx; bottom: 0rpx;
width: 100%;
justify-content: space-between;
.item {
width: 100%;
justify-content: space-between;
// background-image: linear-gradient(-90deg, #e4edff 0%, #fff 100%);
background: url(@/static/bg2.jpg) center no-repeat;
border-radius: 20rpx;
margin: 20rpx 0;
position: relative;
padding: 16rpx;
// @include mshadow(10px, 1);
.tt{
align-items: center;
}
.logo {
image {
width: 100rpx;
height: 100rpx;
}
}
}
.logo {
// width: 100%;
}
.type {
// position: absolute; right: 0;
image {
width: 40rpx;
height: 50rpx;
}
}
text { padding-left: 20rpx;
width: 100%;
font-size: 40rpx;
color: #fff;
line-height: 100rpx;
text-align: right;
padding-right: 20rpx;
}
}
.title {
font-size: 30rpx;
font-weight: bold;
display: block;
text-align: center;
}
.content {
font-size: 26rpx;
line-height: 48rpx;
margin-top: 10rpx;
}
</style>