|
|
@@ -1,134 +1,100 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <!-- 背景图片 -->
|
|
|
- <!-- <image class="bg" src="https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/hp_top_bg.png" mode=""></image> -->
|
|
|
- <view>
|
|
|
- <view class="top-inner">
|
|
|
- <view class="fixed-top-box" :style="{ background: bgColor }">
|
|
|
- <!-- 这里是状态栏 -->
|
|
|
- <view class="status_bar" :style="{height: statusBarHeight}"></view>
|
|
|
- <view class="header-content">
|
|
|
- <view class="top-title">
|
|
|
- <view class="name">云联融智</view>
|
|
|
- </view>
|
|
|
- <view class="header-search-box">
|
|
|
- <view class="search-bar" @click="toSearch">
|
|
|
- <image class="search-icon" src=" /static/search_gray.png" mode="aspectFit"></image>
|
|
|
- <text class="placeholder">请输入关键字搜索</text>
|
|
|
- </view>
|
|
|
- <view class="message-box" @click="navTo('/pages/message/index')">
|
|
|
- <image class="message-icon" src=" /static/message.png" mode="aspectFit"></image>
|
|
|
- <view class="red-dot"></view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 头部间距 -->
|
|
|
- <view :style="{paddingBottom: headerHeight + 'px'}">
|
|
|
- <!-- <view class="status_bar" :style="{height: statusBarHeight}"></view> -->
|
|
|
- </view>
|
|
|
- <!-- 轮播图 -->
|
|
|
- <view class="banner-box">
|
|
|
- <view class="inner">
|
|
|
- <swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
|
|
|
- :duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
|
|
|
- <swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index"
|
|
|
- @click="handleAdvClick(item)">
|
|
|
- <image :src="item.imageUrl" mode="aspectFill"></image>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
+ <view class="home-container">
|
|
|
+ <!-- 顶部背景装饰 -->
|
|
|
+ <view class="top-bg-decoration"></view>
|
|
|
+
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
+ <view class="nav-bar-fixed" :style="{ paddingTop: statusBarHeight + 'px' }">
|
|
|
+ <view class="nav-content">
|
|
|
+ <view class="product-name">产品名称</view>
|
|
|
+ <view class="search-input-box" @click="toSearch">
|
|
|
+ <image class="search-icon" src="/static/search_gray.png" mode="aspectFit"></image>
|
|
|
+ <text class="placeholder">搜索课程</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <!-- 菜单 -->
|
|
|
- <view class="menu-content">
|
|
|
- <view class="menu-box">
|
|
|
- <view @click="yangshengClick(item)" class="menu-item" :key="index" v-for="(item,index) in yangshengs">
|
|
|
- <view class="icon-wrap">
|
|
|
- <image class="icon" :src="item.icon"></image>
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <scroll-view class="main-content-scroll" scroll-y :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
|
|
|
+ <!-- Banner 轮播图 -->
|
|
|
+ <view class="banner-section">
|
|
|
+ <swiper class="banner-swiper" :indicator-dots="true" circular autoplay interval="3000" duration="500"
|
|
|
+ indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
|
|
+ <swiper-item v-for="(item, index) in advList" :key="index" @click="handleAdvClick(item)">
|
|
|
+ <view class="banner-card">
|
|
|
+ <image v-if="item.imageUrl" class="banner-image" :src="item.imageUrl" mode="aspectFill"></image>
|
|
|
</view>
|
|
|
- <view class="title">{{item.title}} </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 导航网格 -->
|
|
|
+ <view class="nav-grid">
|
|
|
+ <view class="nav-item" v-for="(item, index) in navMenus" :key="index" @click="menuClick(item)">
|
|
|
+ <view class="nav-icon-wrap">
|
|
|
+ <image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
+ <text class="nav-title">{{ item.title }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 最新发布 -->
|
|
|
- <view class="section-box latest-release">
|
|
|
+ <!-- 热门好课 -->
|
|
|
+ <view class="section-container">
|
|
|
<view class="section-header">
|
|
|
- <view class="left">
|
|
|
- <view class="vertical-bar"></view>
|
|
|
- <text class="title">最新发布</text>
|
|
|
- </view>
|
|
|
- <view class="more" @click="goClassList(1)">
|
|
|
- <text>查看全部</text>
|
|
|
- <image src=" /static/right_arrow_right.png" mode="aspectFit"></image>
|
|
|
+ <text class="section-title">热门好课</text>
|
|
|
+ <view class="more-link" @click="goClassList(1)">
|
|
|
+ <text>更多</text>
|
|
|
+ <image class="arrow-icon" src="/static/right_arrow_right.png" mode="aspectFit"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <scroll-view class="horizontal-scroll" scroll-x="true">
|
|
|
- <view class="scroll-content">
|
|
|
- <view class="item" v-for="(item, index) in latestList" :key="index" @click="goClass(item.courseId, 1)">
|
|
|
- <image class="cover" :src="item.imgUrl || ' /static/course_img.png'" mode="aspectFill"></image>
|
|
|
- <view class="name ellipsis">{{item.courseName}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 精品录播 -->
|
|
|
- <view class="section-box featured-courses">
|
|
|
- <view class="section-header">
|
|
|
- <view class="left">
|
|
|
- <view class="vertical-bar"></view>
|
|
|
- <text class="title">精品录播</text>
|
|
|
+ <!-- 特色大课 -->
|
|
|
+ <view class="featured-course-card" v-if="featuredCourse" @click="goClass(featuredCourse.courseId, 1)">
|
|
|
+ <view class="cover-wrap">
|
|
|
+ <image class="course-cover" :src="featuredCourse.imgUrl || '/static/bg_video.png'" mode="aspectFill"></image>
|
|
|
+ <view class="tag-yangsheng">养生</view>
|
|
|
+ <view class="lesson-badge">
|
|
|
+ <view class="left">
|
|
|
+ <image class="left-icon" src="/static/course_number_bg.png" mode="aspectFit"></image>
|
|
|
+ <image class="play-icon-small" src="/static/course_number.png" mode="aspectFit"></image>
|
|
|
+ <text>第1讲</text>
|
|
|
+ </view>
|
|
|
+ <text>共{{ featuredCourse.lessonCount }}节课</text>
|
|
|
+ <image class="arrow-right-small" src="/static/right_arrow_white.png" mode="aspectFit"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="more" @click="goClassList(2)">
|
|
|
- <text>查看全部</text>
|
|
|
- <image src=" /static/right_arrow_right.png" mode="aspectFit"></image>
|
|
|
+ <view class="course-info">
|
|
|
+ <view class="course-title">{{ featuredCourse.courseName }}</view>
|
|
|
+ <view class="course-footer">
|
|
|
+ <view class="author-info">
|
|
|
+ <image class="author-avatar" :src="featuredCourse.authorAvatar || '/static/avatar.png'" mode="aspectFill"></image>
|
|
|
+ <text class="author-name">{{ featuredCourse.authorName }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="playback-count">{{ featuredCourse.playCount }}次播放</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="grid-list">
|
|
|
- <view class="item" v-for="(item, index) in featuredList" :key="index" @click="goClass(item.courseId, 1)">
|
|
|
- <view class="cover-box">
|
|
|
- <image class="cover" :src="item.imgUrl || ' /static/course_img.png'" mode="aspectFill"></image>
|
|
|
- <view class="overlay bottom-info">
|
|
|
- <text class="left-text">{{item.playCount}}次播放</text>
|
|
|
- <text class="right-text">共{{item.lessonCount}}讲</text>
|
|
|
+
|
|
|
+ <!-- 课程列表 -->
|
|
|
+ <view class="course-list">
|
|
|
+ <view class="course-item" v-for="(item, index) in otherCourses" :key="index" @click="goClass(item.courseId, 1)">
|
|
|
+ <image class="item-thumb" :src="item.imgUrl || '/static/course_img.png'" mode="aspectFill"></image>
|
|
|
+ <view class="item-content">
|
|
|
+ <view class="item-title ellipsis-2">{{ item.courseName }}</view>
|
|
|
+ <view class="item-footer">
|
|
|
+ <text class="item-playback">{{ item.playCount }}次播放</text>
|
|
|
+ <view class="study-btn">去学习</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="name ellipsis">{{item.courseName}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 底部间距 -->
|
|
|
+ <view class="bottom-safe-area"></view>
|
|
|
+ </scroll-view>
|
|
|
|
|
|
- <!--养生干货-->
|
|
|
- <!-- <view class="articles" >
|
|
|
- <view class="title-box">
|
|
|
- <view class="title">养生干货</view>
|
|
|
- <view class="more" @click="navTo('/pages_index/index/articleList')">
|
|
|
- <view class="text">更多</view>
|
|
|
- <image src="https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/arrow_gray.png"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="article-box" v-if="articles.length>0">
|
|
|
- <view class="item" :key="index" @click="navTo('/pages_index/index/articleDetails?articleId='+item.articleId)" v-for="(item,index) in articles">
|
|
|
- <view class="left">
|
|
|
- <view class="title">
|
|
|
- {{item.title}}
|
|
|
- </view>
|
|
|
- <view class="views">
|
|
|
- 浏览量 {{item.views}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="right">
|
|
|
- <image :src="item.imageUrl"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
+ <!-- 原有的弹窗组件保留 -->
|
|
|
<view class="popup-box" v-if="activityShow">
|
|
|
<view class="info-mask" @tap="closeActivity()"></view>
|
|
|
<view class="info-form">
|
|
|
@@ -141,2502 +107,447 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- courseList,
|
|
|
- courseListB
|
|
|
- } from '@/api/class.js'
|
|
|
+ import { courseList } from '@/api/class.js'
|
|
|
import zModal from '@/components/z-modal/z-modal.vue'
|
|
|
- import {
|
|
|
- getStoreActivity
|
|
|
- } from '@/api/activity.js'
|
|
|
- import {
|
|
|
- getDepartmentList
|
|
|
- } from '@/api/doctorOrder.js'
|
|
|
- import {
|
|
|
- getMenu,
|
|
|
- getCanvas,
|
|
|
- getIndexData,
|
|
|
- getTuiDoctor,
|
|
|
- getTuiArticle,
|
|
|
- getTuiDoctorOrder,
|
|
|
- getCartCount,
|
|
|
- getConfigByKey
|
|
|
- } from '@/api/index'
|
|
|
- import {
|
|
|
- getDoctorArticleList
|
|
|
- } from '@/api/doctorArticle.js'
|
|
|
- import {
|
|
|
- getArticleList
|
|
|
- } from '@/api/article.js'
|
|
|
- import {
|
|
|
- getStoreConfig
|
|
|
- } from '@/api/common'
|
|
|
- // import tabBg from "https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/tab_bg.png"
|
|
|
- import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
|
|
|
- import Menu from '@/components/Menu.vue'
|
|
|
- import HotProduct from './components/HotProduct.vue'
|
|
|
- import NewProduct from './components/NewProduct.vue'
|
|
|
- import TuiProduct from '@/components/tuiProduct.vue'
|
|
|
- import {
|
|
|
- getUserInfo,
|
|
|
- bindPromoter
|
|
|
- } from '@/api/user'
|
|
|
+ import { getStoreActivity } from '@/api/activity.js'
|
|
|
+ import { getIndexData, bindPromoter } from '@/api/index'
|
|
|
+ import { getUserInfo } from '@/api/user'
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
- zModal,
|
|
|
- freeAudio,
|
|
|
- Menu,
|
|
|
- HotProduct,
|
|
|
- NewProduct,
|
|
|
- TuiProduct
|
|
|
+ zModal
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- isLike: false,
|
|
|
- classList: [],
|
|
|
- btnGroup: [{
|
|
|
- text: '取消',
|
|
|
- color: '#FFFFFF',
|
|
|
- bgColor: '#999999',
|
|
|
- width: '150rpx',
|
|
|
- height: '80rpx',
|
|
|
- shape: 'fillet',
|
|
|
- eventName: 'cancle'
|
|
|
- }, {
|
|
|
- text: '确定',
|
|
|
- color: '#FFFFFF',
|
|
|
- bgColor: '#5B37FD ',
|
|
|
- width: '150rpx',
|
|
|
- height: '80rpx',
|
|
|
- shape: 'fillet',
|
|
|
- eventName: 'sure'
|
|
|
- }],
|
|
|
- tuiModalControl: false,
|
|
|
- activity: null,
|
|
|
- activityShow: false,
|
|
|
- newProductList: [],
|
|
|
- hotProductList: [],
|
|
|
- tuiProductList: [],
|
|
|
- menus: [],
|
|
|
- canvas: [],
|
|
|
- allDoctorTitle: "全部医生",
|
|
|
- topLen: 0,
|
|
|
- deptId: 0,
|
|
|
- depts: [],
|
|
|
- docTab: 1,
|
|
|
- top: 0,
|
|
|
- cartCount: 0,
|
|
|
- doctorOrderList: [],
|
|
|
- orderType: 0,
|
|
|
- cateId: null,
|
|
|
- articleList: [],
|
|
|
- advList: [],
|
|
|
- doctorList: [],
|
|
|
- articleCateList: [],
|
|
|
- doctocArticles: [], //养生讲堂
|
|
|
- articles: [], //养生干货
|
|
|
- // 状态栏的高度
|
|
|
- statusBarHeight: uni.getStorageSync('menuInfo') ? uni.getStorageSync('menuInfo').statusBarHeight : 20,
|
|
|
- headerHeight: 88, // 默认高度，后续动态计算
|
|
|
- tabBg: "https://zlwh.obs.cn-southwest-2.myhuaweicloud.com/orangeShop/tab_bg.png", // tab切换背景
|
|
|
- // 问诊案例类型
|
|
|
- orderTypes: [{
|
|
|
- name: '全部',
|
|
|
- id: 0,
|
|
|
- }, {
|
|
|
- name: '图文',
|
|
|
- id: 1,
|
|
|
- }, {
|
|
|
- name: '语音',
|
|
|
- id: 2,
|
|
|
- }],
|
|
|
- // 限时消息是否显示
|
|
|
- messageShow: true,
|
|
|
- yangshengs: [{
|
|
|
- id: "1",
|
|
|
- title: "精选课程",
|
|
|
- page: "/pages_course/teacherClassroom?type=1",
|
|
|
- icon: "/static/menu1.png",
|
|
|
- },
|
|
|
- {
|
|
|
- id: "2",
|
|
|
- title: "分享社区",
|
|
|
- page: "/pages_index/index/articleList",
|
|
|
- icon: "/static/menu2.png",
|
|
|
- },
|
|
|
- {
|
|
|
- id: "3",
|
|
|
- title: "付费课程",
|
|
|
- page: "/pages_course/teacherClassroom?type=2",
|
|
|
- icon: "/static/menu3.png",
|
|
|
- },
|
|
|
- {
|
|
|
- id: "4",
|
|
|
- title: "全部课程",
|
|
|
- page: "/pages_course/teacherClassroom",
|
|
|
- icon: "/static/menu4.png",
|
|
|
- }
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
|
+ advList: [
|
|
|
+ { imageUrl: '', advUrl: '', showType: 1 },
|
|
|
+ { imageUrl: '', advUrl: '', showType: 1 }
|
|
|
],
|
|
|
- latestList: [
|
|
|
- { courseId: 1, courseName: '中医降脂养肝课', imgUrl: ' /static/famous_doctor_img.png' },
|
|
|
- { courseId: 2, courseName: '五脏养生操', imgUrl: ' /static/famous_doctor_img2.png' },
|
|
|
- { courseId: 3, courseName: '杜丁秋冬肠胃养生课', imgUrl: ' /static/course_img.png' }
|
|
|
+ navMenus: [
|
|
|
+ { title: '药品商城', icon: '/static/menu1.png', linkUrl: '/pages/shopping/index', linkType: 1 },
|
|
|
+ { title: '热门好课', icon: '/static/menu2.png',linkUrl: '/pages_course/teacherClassroom?type=1', linkType: 1 },
|
|
|
+ { title: '我的课程', icon: '/static/menu3.png', linkUrl: '/pages_course/teacherClassroom?type=2', linkType: 1 },
|
|
|
+ { title: '专业客服', icon: '/static/menu4.png', linkUrl: '/pages/message/index', linkType: 1 }
|
|
|
],
|
|
|
- featuredList: [
|
|
|
- { courseId: 4, courseName: '中医降脂养肝课', imgUrl: ' /static/famous_doctor_img.png', playCount: '8.1万', lessonCount: 15 },
|
|
|
- { courseId: 5, courseName: '五脏养生操', imgUrl: ' /static/famous_doctor_img2.png', playCount: '8.1万', lessonCount: 15 },
|
|
|
- { courseId: 6, courseName: '杜丁秋冬肠胃养生课', imgUrl: ' /static/course_img.png', playCount: '8.1万', lessonCount: 15 },
|
|
|
- { courseId: 7, courseName: '冬季养生', imgUrl: ' /static/famous_doctor_img.png', playCount: '8.1万', lessonCount: 15 }
|
|
|
+ featuredCourse: {
|
|
|
+ courseId: 4,
|
|
|
+ courseName: '你和合理膳食还有多少距离?',
|
|
|
+ imgUrl: '/static/bg_video.png',
|
|
|
+ lessonCount: 30,
|
|
|
+ authorName: '健康大讲堂',
|
|
|
+ authorAvatar: '/static/avatar.png',
|
|
|
+ playCount: '8.1万'
|
|
|
+ },
|
|
|
+ otherCourses: [
|
|
|
+ { courseId: 5, courseName: '脑梗塞是帕金森病的发病因素吗?', imgUrl: '/static/famous_doctor_img.png', playCount: '25862' },
|
|
|
+ { courseId: 6, courseName: '合理的运动与健康', imgUrl: '/static/famous_doctor_img2.png', playCount: '25862' },
|
|
|
+ { courseId: 7, courseName: '合理的运动与健康', imgUrl: '/static/course_img.png', playCount: '25862' },
|
|
|
+ { courseId: 8, courseName: '合理的运动与健康', imgUrl: '/static/famous_doctor_img.png', playCount: '25862' }
|
|
|
],
|
|
|
- userinfoa: [],
|
|
|
- isuser: false,
|
|
|
- menvKey: [],
|
|
|
- classListb:{}
|
|
|
- }
|
|
|
- // this.getStoreActivity();
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- if (option.userCode != null) {
|
|
|
- uni.setStorageSync('userCode', option.userCode);
|
|
|
- if (this.utils.checkLoginState()) {
|
|
|
- this.getUserInfo();
|
|
|
- }
|
|
|
- }
|
|
|
- if (option.hasOwnProperty('q') && option.q) {
|
|
|
- // 通过下面这步解码，可以拿到url的值
|
|
|
- const url = decodeURIComponent(option.q)
|
|
|
- this.url = url;
|
|
|
- // // 对url中携带的参数提取处理
|
|
|
- const obj = this.utils.urlToObj(url)
|
|
|
- uni.setStorageSync('userCode', obj.userCode);
|
|
|
- if (this.utils.checkLoginState()) {
|
|
|
- this.getUserInfo();
|
|
|
- }
|
|
|
- }
|
|
|
- // this.getStoreActivity()
|
|
|
- },
|
|
|
- // 暂停所有音频（一般用于页面切换时停止正在播放的音频）
|
|
|
- onUnload() { //普通页面在 onUnload 生命周期中执行
|
|
|
- uni.$emit('stop')
|
|
|
- },
|
|
|
- onHide() { //tabBar页面在onHide生命周期中执行
|
|
|
- uni.$emit('stop')
|
|
|
- },
|
|
|
- onPageScroll(e) {
|
|
|
- //console.log(e)
|
|
|
- this.top = e.scrollTop;
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getCourseList()
|
|
|
- //this.getDepartmentList();
|
|
|
- this.calculateHeaderHeight();
|
|
|
- },
|
|
|
- onShareAppMessage(res) {
|
|
|
- return {
|
|
|
- title: '盛世生活工具A-您的专属健康解决方案',
|
|
|
- path: `/pages/common/launch`,
|
|
|
- imageUrl: this.$store.state.imgpath+'/app/image/logo.png'//分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
|
|
- }
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- // console.log("onReachBottom")
|
|
|
- this.$refs.tuiProduct.getTuiProducts();
|
|
|
- },
|
|
|
- //分享到朋友圈
|
|
|
- onShareTimeline(res) {
|
|
|
- return {
|
|
|
- title: '盛世生活工具A-您的专属健康解决方案',
|
|
|
- query: '', //页面参数
|
|
|
- imageUrl: this.$store.state.imgpath+'/app/image/logo.png'//分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
|
|
|
+ activityShow: false,
|
|
|
+ activity: null,
|
|
|
+ tuiModalControl: false,
|
|
|
+ btnGroup: [
|
|
|
+ { text: '取消', color: '#FFFFFF', bgColor: '#999999', width: '150rpx', height: '80rpx', shape: 'fillet', eventName: 'cancle' },
|
|
|
+ { text: '确定', color: '#FFFFFF', bgColor: '#5B37FD', width: '150rpx', height: '80rpx', shape: 'fillet', eventName: 'sure' }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- computed: {
|
|
|
- // 计算属性的 getter
|
|
|
- bgColor: function() {
|
|
|
- var top = this.top / 30;
|
|
|
- return 'rgba(255,255,255, ' + top + ')';
|
|
|
- },
|
|
|
- imgPath() {
|
|
|
- return this.$store.state.imgpath
|
|
|
- },
|
|
|
- isDrug() {
|
|
|
- return this.$store.state.isDrug
|
|
|
- },
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getMenu();
|
|
|
- this.getIndexData()
|
|
|
- //this.getTuiDoctorOrder();
|
|
|
- // console.log(uni.getStorageSync('isLocation'))
|
|
|
- // if(uni.getStorageSync('isLocation')==""){
|
|
|
- // this.getLocation();
|
|
|
- // }
|
|
|
- if (uni.getStorageSync('AppToken')) {
|
|
|
- this.getUserInfo()
|
|
|
- } else {
|
|
|
- this.isuser = true
|
|
|
- }
|
|
|
- if (this.utils.checkLoginState()) {
|
|
|
- this.getCartCount();
|
|
|
- }
|
|
|
- this.getStoreConfig();
|
|
|
- //this.getTuiDoctor()
|
|
|
- this.getCanvas();
|
|
|
- this.getDoctorArticleList();
|
|
|
- this.getArticleList();
|
|
|
- this.getshowmanv()
|
|
|
+ onLoad() {
|
|
|
+ this.getIndexData();
|
|
|
+ this.getCourseList();
|
|
|
},
|
|
|
methods: {
|
|
|
- likeClick(item){
|
|
|
- this.isLike = !this.isLike
|
|
|
- },
|
|
|
- calculateHeaderHeight() {
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select('.fixed-top-box').boundingClientRect(data => {
|
|
|
- if (data) {
|
|
|
- this.headerHeight = data.height;
|
|
|
- }
|
|
|
- }).exec();
|
|
|
- },
|
|
|
getCourseList() {
|
|
|
courseList().then(res => {
|
|
|
if (res.code == 200 && res.data && res.data.length > 0) {
|
|
|
- console.log('公域',res.data)
|
|
|
- this.classList = res.data.slice(0, 3)
|
|
|
- } else {
|
|
|
- // 模拟数据
|
|
|
- this.classList = [
|
|
|
- {
|
|
|
- courseId: 1,
|
|
|
- courseName: '第一期超nice的健康博主大盘点，带你领略健康生活',
|
|
|
- imgUrl: ' /static/course_img.png'
|
|
|
- },
|
|
|
- {
|
|
|
- courseId: 2,
|
|
|
- courseName: '家庭医生健康顾问服务，全家人的健康保障',
|
|
|
- imgUrl: ' /static/course_img.png'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- // 接口报错也显示模拟数据
|
|
|
- this.classList = [
|
|
|
- {
|
|
|
- courseId: 1,
|
|
|
- courseName: '第一期超nice的健康博主大盘点，带你领略健康生活',
|
|
|
- imgUrl: ' /static/course_img.png'
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
- },
|
|
|
- goClass(id,type) {
|
|
|
- // console.log(id)
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages_course/learn?courseId='+id+'&type='+type
|
|
|
- })
|
|
|
- },
|
|
|
- goClassList(type) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages_course/teacherClassroom?type='+type
|
|
|
- })
|
|
|
- },
|
|
|
- getshowmanv() {
|
|
|
- const data = {
|
|
|
- key: "store.appShow"
|
|
|
- }
|
|
|
- getConfigByKey(data).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.menvKey = JSON.parse(res.data)
|
|
|
- // console.log('排序', this.menvKey[0])
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getUserInfo() {
|
|
|
- getUserInfo().then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- if (res.user != null) {
|
|
|
- this.userinfoa = res.user
|
|
|
- // if(res.user.isPromoter==null||res.user.isPromoter==0){
|
|
|
- // this.tuiModalControl=true
|
|
|
- // }
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- cancleTui(e) {
|
|
|
- this.tuiModalControl = false
|
|
|
- },
|
|
|
- submitTui(e) {
|
|
|
- // console.log(e)
|
|
|
- if (e.inputText == null || e.inputText == "") {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请输入邀请码",
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
- var data = {
|
|
|
- userCode: e.inputText
|
|
|
- };
|
|
|
- bindPromoter(data).then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- this.tuiModalControl = false
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: res.msg,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
-
|
|
|
- },
|
|
|
- bindload: function(detail) {},
|
|
|
- binderror: function(detail) {},
|
|
|
- closeActivity() {
|
|
|
- this.activityShow = false;
|
|
|
- // uni.setStorageSync(this.activity.activityId,null);
|
|
|
- },
|
|
|
- getStoreActivity() {
|
|
|
- let data = {}
|
|
|
- getStoreActivity(data).then(res => {
|
|
|
- this.activity = res.activity;
|
|
|
- if (this.activity != null) {
|
|
|
- // if(uni.getStorageSync(this.activity.activityId)!=null)
|
|
|
- // {
|
|
|
- // uni.setStorageSync(this.activity.activityId,1);
|
|
|
- // this.activityShow=true;
|
|
|
- // }
|
|
|
- // else{
|
|
|
- // this.activityShow=false;
|
|
|
- // }
|
|
|
- this.activityShow = true;
|
|
|
- } else {
|
|
|
- this.activityShow = false;
|
|
|
+ // 实际数据更新
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- showActivity() {
|
|
|
- this.activityShow = false;
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages_shopping/shopping/activityDetails?activityId=' + this.activity.activityId
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- menuClick(item) {
|
|
|
- if (item.linkType == 1) {
|
|
|
- if (item.linkUrl == "/pages/shopping/index") {
|
|
|
- uni.switchTab({
|
|
|
- url: item.linkUrl
|
|
|
- })
|
|
|
- } else if (item.linkUrl == "/pages/healthy/index") {
|
|
|
- uni.switchTab({
|
|
|
- url: item.linkUrl
|
|
|
- })
|
|
|
- } else {
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: item.linkUrl
|
|
|
- })
|
|
|
+ getIndexData() {
|
|
|
+ getIndexData().then(res => {
|
|
|
+ if (res.code == 200 && res.data.advList && res.data.advList.length > 0) {
|
|
|
+ this.advList = res.data.advList;
|
|
|
}
|
|
|
-
|
|
|
- } else if (item.linkType == 0) {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "开发中...",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- goDev() {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "开发中...",
|
|
|
});
|
|
|
},
|
|
|
handleAdvClick(item) {
|
|
|
- console.log(item);
|
|
|
- if (item.showType == 1) {
|
|
|
- uni.setStorageSync('url', item.advUrl);
|
|
|
- uni.navigateTo({
|
|
|
- url: "h5"
|
|
|
- })
|
|
|
- } else if (item.showType == 2) {
|
|
|
- uni.navigateTo({
|
|
|
- url: item.advUrl
|
|
|
- })
|
|
|
- } else if (item.showType == 3) {
|
|
|
- uni.setStorageSync('content', item.content);
|
|
|
- uni.navigateTo({
|
|
|
- url: "content"
|
|
|
- })
|
|
|
+ if (item.advUrl) {
|
|
|
+ uni.navigateTo({ url: item.advUrl });
|
|
|
}
|
|
|
},
|
|
|
- deptChange(item) {
|
|
|
- this.deptId = item.departmentId;
|
|
|
- this.getTuiDoctor();
|
|
|
- },
|
|
|
- getMenu() {
|
|
|
- this.menus = [];
|
|
|
- getMenu().then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- // for (var i = 0; i < res.data.length; i++) {
|
|
|
- // const item=res.data[i];
|
|
|
- // if(item.menuName.indexOf('健康百科')>=0 || item.menuName.indexOf('健康自测')>=0
|
|
|
- // || item.menuName.indexOf('健康档案')>=0 ||item.menuName.indexOf('用药咨询')>=0){
|
|
|
- // this.menus.push(item);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // console.log('图标', res.data)
|
|
|
- // const menuNames = ['健康百科', '健康自测', '健康档案', '药品商城', '领券中心', '会员'];
|
|
|
- this.menus = res.data
|
|
|
- // this.menus = res.data.filter(item => menuNames.some(menuName => item.menuName.includes(menuName)) );
|
|
|
- } else {
|
|
|
-
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getCanvas() {
|
|
|
- getCanvas().then(res => {
|
|
|
- if (res.code == 200 && res.data && res.data.json) {
|
|
|
- // console.log(res.data)
|
|
|
- this.canvas = JSON.parse(res.data.json)
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getDepartmentList() {
|
|
|
- this.depts = [];
|
|
|
- getDepartmentList().then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- var allDept = {
|
|
|
- departmentId: 0,
|
|
|
- departmentName: "全部"
|
|
|
- }
|
|
|
- this.depts.push(allDept);
|
|
|
- this.depts = this.depts.concat(res.data);
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- getTuiDoctor() {
|
|
|
- let data = {
|
|
|
- departmentId: this.deptId,
|
|
|
- doctorType: this.docTab
|
|
|
- };
|
|
|
- getTuiDoctor(data).then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.doctorList = res.data;
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- docTabChange(val) {
|
|
|
- if (val == 1) {
|
|
|
- this.allDoctorTitle = "全部医师"
|
|
|
- }
|
|
|
- if (val == 2) {
|
|
|
- this.allDoctorTitle = "全部药师"
|
|
|
- }
|
|
|
- if (val == 3) {
|
|
|
- this.allDoctorTitle = "全部营养师"
|
|
|
+ menuClick(item) {
|
|
|
+ if (item.linkType == 1) {
|
|
|
+ uni.navigateTo({ url: item.linkUrl });
|
|
|
}
|
|
|
- this.docTab = val;
|
|
|
- this.getTuiDoctor();
|
|
|
- },
|
|
|
- showImg(urls) {
|
|
|
- var imgArr = urls.split(',');
|
|
|
- //预览图片
|
|
|
- uni.previewImage({
|
|
|
- urls: imgArr,
|
|
|
- current: imgArr[0]
|
|
|
- });
|
|
|
- },
|
|
|
- getStoreConfig() {
|
|
|
- getStoreConfig().then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- uni.setStorageSync('config', JSON.stringify(res.data));
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
-
|
|
|
- },
|
|
|
- goAuthUrl(url) {
|
|
|
- this.utils.isLogin().then(res => {
|
|
|
- if (res) {
|
|
|
- uni.navigateTo({
|
|
|
- url: url
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 跳转页面
|
|
|
- navTo(url) {
|
|
|
- uni.navigateTo({
|
|
|
- url: url
|
|
|
- })
|
|
|
- },
|
|
|
- getLocation() {
|
|
|
- var that = this;
|
|
|
- uni.authorize({
|
|
|
- scope: 'scope.userLocation',
|
|
|
- success() {
|
|
|
- uni.getLocation({
|
|
|
- type: 'gcj02', //腾讯地图使用gcj02获取位置坐标
|
|
|
- success: function(res) {
|
|
|
- uni.setStorageSync('isLocation', 1);
|
|
|
- uni.setStorageSync('lng', res.longitude);
|
|
|
- uni.setStorageSync('lat', res.latitude);
|
|
|
- },
|
|
|
- })
|
|
|
- },
|
|
|
- fail(err) {
|
|
|
- console.log(err)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getIndexData() {
|
|
|
- let data = {
|
|
|
- };
|
|
|
- getIndexData(data).then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.advList = res.data.advList;
|
|
|
- this.articleCateList = res.data.articleCateList;
|
|
|
- if (this.articleCateList != null && this.articleCateList.length > 0) {
|
|
|
- this.cateId = this.articleCateList[0].cateId;
|
|
|
- this.getTuiArticle()
|
|
|
- }
|
|
|
- this.tuiProductList = res.data.tuiProductList
|
|
|
- this.newProductList = res.data.newProductList
|
|
|
- this.hotProductList = res.data.hotProductList
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- getCartCount() {
|
|
|
- this.utils.isLogin().then(res => {
|
|
|
- if (res) {
|
|
|
- getCartCount().then(
|
|
|
- cartRes => {
|
|
|
- if (cartRes.code == 200) {
|
|
|
- this.cartCount = cartRes.data;
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- getTuiArticle() {
|
|
|
- let data = {
|
|
|
- cateId: this.cateId
|
|
|
- };
|
|
|
- getTuiArticle(data).then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.articleList = res.data;
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- getTuiDoctorOrder() {
|
|
|
- let data = {
|
|
|
- orderType: this.orderType
|
|
|
- };
|
|
|
- getTuiDoctorOrder(data).then(
|
|
|
- res => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.doctorOrderList = res.data;
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- rej => {}
|
|
|
- );
|
|
|
- },
|
|
|
- showArticle(item) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '../healthy/detail?articleId=' + item.articleId
|
|
|
- })
|
|
|
- },
|
|
|
- showProduct(item) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '../shopping/productDetails?productId=' + item.productId
|
|
|
- })
|
|
|
},
|
|
|
- // 顶部搜索
|
|
|
- toSearch() {
|
|
|
+ goClass(id, type) {
|
|
|
uni.navigateTo({
|
|
|
- url: './productSearch'
|
|
|
- })
|
|
|
- },
|
|
|
- // 健康知识选中
|
|
|
- articleCateChange(item) {
|
|
|
- this.cateId = item.cateId;
|
|
|
- this.getTuiArticle();
|
|
|
- },
|
|
|
- // 问诊案例选中
|
|
|
- orderTypeChange(item) {
|
|
|
- this.orderType = item.id;
|
|
|
- console.log(this.orderType)
|
|
|
- this.getTuiDoctorOrder();
|
|
|
- },
|
|
|
- // 关闭限时消息
|
|
|
- closeMsg() {
|
|
|
- this.messageShow = false
|
|
|
+ url: '/pages_course/learn?courseId=' + id + '&type=' + type
|
|
|
+ });
|
|
|
},
|
|
|
- // 查看全部
|
|
|
- viewAll(url) {
|
|
|
+ goClassList(type) {
|
|
|
uni.navigateTo({
|
|
|
- url: '/pages/home/' + url,
|
|
|
+ url: '/pages_course/teacherClassroom?type=' + type
|
|
|
});
|
|
|
},
|
|
|
- shopDoctor(item) {
|
|
|
- console.log(item);
|
|
|
- uni.navigateTo({
|
|
|
- url: "/pages_doctor/doctorDetail?doctorId=" + item.doctorId
|
|
|
- })
|
|
|
+ toSearch() {
|
|
|
+ uni.navigateTo({ url: './productSearch' });
|
|
|
},
|
|
|
- switchTo(url) {
|
|
|
- uni.switchTab({
|
|
|
- url: url
|
|
|
- })
|
|
|
- return
|
|
|
+ closeActivity() { this.activityShow = false; },
|
|
|
+ showActivity() {
|
|
|
+ this.activityShow = false;
|
|
|
+ uni.navigateTo({ url: '/pages_shopping/shopping/activityDetails?activityId=' + this.activity.activityId });
|
|
|
},
|
|
|
- yangshengClick(item) {
|
|
|
- if (item.page == "") {
|
|
|
- uni.showToast({
|
|
|
- icon: "none",
|
|
|
- title: '暂无更多'
|
|
|
- })
|
|
|
+ cancleTui() { this.tuiModalControl = false; },
|
|
|
+ submitTui(e) {
|
|
|
+ if (!e.inputText) {
|
|
|
+ uni.showToast({ icon: 'none', title: "请输入邀请码" });
|
|
|
return;
|
|
|
}
|
|
|
- uni.navigateTo({
|
|
|
- url: item.page
|
|
|
- })
|
|
|
- },
|
|
|
- // 在线问诊
|
|
|
- openIm() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages_doctor/doctorOrderIM?orderId=10'
|
|
|
- })
|
|
|
- },
|
|
|
- getDoctorArticleList() {
|
|
|
- //联网加载数据
|
|
|
- var that = this;
|
|
|
- var data = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10
|
|
|
- };
|
|
|
- getDoctorArticleList(data).then(res => {
|
|
|
- if (res.code == 200 && res.data && res.data.list && res.data.list.length > 0) {
|
|
|
- this.doctocArticles = res.data.list;
|
|
|
- } else {
|
|
|
- // 模拟数据
|
|
|
- this.doctocArticles = [
|
|
|
- {
|
|
|
- articleId: 1,
|
|
|
- title: '中医降脂养肝课',
|
|
|
- imageUrl: ' /static/famous_doctor_img.png',
|
|
|
- views: 3724,
|
|
|
- doctorName: '崔医生',
|
|
|
- avatar: ' /static/avatar.png'
|
|
|
- },
|
|
|
- {
|
|
|
- articleId: 2,
|
|
|
- title: '春季养生与防病',
|
|
|
- imageUrl: ' /static/famous_doctor_img2.png',
|
|
|
- views: 2850,
|
|
|
- doctorName: '崔医生',
|
|
|
- avatar: ' /static/avatar.png'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- // 接口报错也显示模拟数据
|
|
|
- this.doctocArticles = [
|
|
|
- {
|
|
|
- articleId: 1,
|
|
|
- title: '中医降脂养肝课',
|
|
|
- imageUrl: ' /static/famous_doctor_img.png',
|
|
|
- views: 3724,
|
|
|
- doctorName: '崔医生',
|
|
|
- avatar: ' /static/avatar.png'
|
|
|
- }
|
|
|
- ]
|
|
|
- });
|
|
|
- },
|
|
|
- getArticleList() {
|
|
|
- //联网加载数据
|
|
|
- var that = this;
|
|
|
- var data = {
|
|
|
- isTui: 1,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- };
|
|
|
- getArticleList(data).then(res => {
|
|
|
+ bindPromoter({ userCode: e.inputText }).then(res => {
|
|
|
if (res.code == 200) {
|
|
|
- this.articles = res.data.list;
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- icon: 'none',
|
|
|
- title: "请求失败",
|
|
|
- });
|
|
|
+ uni.showToast({ icon: 'none', title: res.msg });
|
|
|
+ this.tuiModalControl = false;
|
|
|
}
|
|
|
});
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .fixed-top-box {
|
|
|
+ .home-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-bg-decoration {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
width: 100%;
|
|
|
+ height: 450rpx;
|
|
|
+ background: linear-gradient(180deg, #F0F2FF 0%, rgba(255, 255, 255, 0) 100%);
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 导航栏 */
|
|
|
+ .nav-bar-fixed {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- z-index: 1000;
|
|
|
- transition: all 0.5s;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .status_bar {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ z-index: 100;
|
|
|
+ background-color: transparent;
|
|
|
|
|
|
- .header-content {
|
|
|
- padding: 10rpx 30rpx 20rpx;
|
|
|
+ .nav-content {
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .product-name {
|
|
|
+ font-size: 42rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A1A1A;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
|
|
|
- .top-title {
|
|
|
- height: 88upx;
|
|
|
+ .search-input-box {
|
|
|
+ width: 302rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 34rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
+ padding: 0 28rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
- .name {
|
|
|
- font-size: 44rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #1A1A1A;
|
|
|
+ .search-icon {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-right: 14rpx;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .header-search-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 10rpx;
|
|
|
+ .placeholder {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #BBBBBB;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .search-bar {
|
|
|
- flex: 1;
|
|
|
- height: 72rpx;
|
|
|
- background: #F5F6F8;
|
|
|
- border-radius: 36rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 30rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .search-icon {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 16rpx;
|
|
|
- }
|
|
|
+ .main-content-scroll {
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
|
|
|
- .placeholder {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
+ /* Banner */
|
|
|
+ .banner-section {
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
|
|
|
- .message-box {
|
|
|
- position: relative;
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .banner-swiper {
|
|
|
+ height: 233rpx;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- .message-icon {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
+ .banner-card {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(135deg, #FF4D4D 0%, #FF8533 100%);
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
|
|
|
- .red-dot {
|
|
|
- position: absolute;
|
|
|
- top: 4rpx;
|
|
|
- right: 4rpx;
|
|
|
- width: 16rpx;
|
|
|
- height: 16rpx;
|
|
|
- background: #FF4D4F;
|
|
|
- border-radius: 50%;
|
|
|
- border: 2rpx solid #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .banner-image {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- background-color: #fff;
|
|
|
- min-height: 100vh;
|
|
|
-
|
|
|
- .banner-box {
|
|
|
- padding: 0 30upx;
|
|
|
- margin-top: 20rpx;
|
|
|
+ /* 导航网格 */
|
|
|
+ .nav-grid {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 40rpx 50rpx;
|
|
|
|
|
|
- .inner {
|
|
|
- width: 100%;
|
|
|
- height: 300upx;
|
|
|
- border-radius: 20upx;
|
|
|
- overflow: hidden;
|
|
|
+ .nav-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .swiper,
|
|
|
- .swiper-item,
|
|
|
- .swiper-item image {
|
|
|
- width: 100%;
|
|
|
+ .nav-icon-wrap {
|
|
|
+ width: 104rpx;
|
|
|
+ height: 104rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .nav-icon {
|
|
|
+ width:100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .menu-content {
|
|
|
- background-color: transparent;
|
|
|
- padding: 40upx 30upx 20upx;
|
|
|
+ .nav-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 章节容器 */
|
|
|
+ .section-container {
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
|
|
|
- .menu-box {
|
|
|
+ .section-header {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
|
|
|
- .menu-item {
|
|
|
+ .section-title {
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #1A1A1A;
|
|
|
+ }
|
|
|
+
|
|
|
+ .more-link {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
align-items: center;
|
|
|
- width: 25%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #BBBBBB;
|
|
|
+
|
|
|
+ .arrow-icon {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .icon-wrap {
|
|
|
- width: 100upx;
|
|
|
- height: 100upx;
|
|
|
- border-radius: 50%;
|
|
|
+ /* 特色大课卡片 */
|
|
|
+ .featured-course-card {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 6rpx 30rpx rgba(0, 0, 0, 0.06);
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+
|
|
|
+ .cover-wrap {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 420rpx;
|
|
|
+
|
|
|
+ .course-cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-yangsheng {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ padding: 10rpx 28rpx;
|
|
|
+ background: #5B37FD;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-bottom-right-radius: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lesson-badge {
|
|
|
+ padding-right: 16rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 24rpx;
|
|
|
+ right: 24rpx;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ backdrop-filter: blur(6px);
|
|
|
+ border-radius: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ height: 48rpx;
|
|
|
+ align-items: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 26rpx;
|
|
|
+ .left{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-bottom: 16upx;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 88upx;
|
|
|
- height: 88upx;
|
|
|
- }
|
|
|
+ padding-left: 16rpx;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ position: relative;
|
|
|
+ .left-icon{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 144rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .play-icon-small {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-right: 4rpx;
|
|
|
}
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 26upx;
|
|
|
- color: #333;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-right-small {
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .section-box {
|
|
|
- padding: 20rpx 30rpx;
|
|
|
+ .course-info {
|
|
|
+ padding: 30rpx;
|
|
|
+ background: #68686A;
|
|
|
+ color: #fff;
|
|
|
+ .course-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+ }
|
|
|
|
|
|
- .section-header {
|
|
|
+ .course-footer {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 24rpx;
|
|
|
|
|
|
- .left {
|
|
|
+ .author-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
- .vertical-bar {
|
|
|
- width: 8rpx;
|
|
|
- height: 32rpx;
|
|
|
- background: #5C4BFF;
|
|
|
- border-radius: 4rpx;
|
|
|
+ .author-avatar {
|
|
|
+ width: 52rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ border-radius: 50%;
|
|
|
margin-right: 16rpx;
|
|
|
}
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #1A1A1A;
|
|
|
+ .author-name {
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .more {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
- margin-right: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- }
|
|
|
+ .playback-count {
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .horizontal-scroll {
|
|
|
- width: 100%;
|
|
|
- white-space: nowrap;
|
|
|
-
|
|
|
- .scroll-content {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 220rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- flex-shrink: 0;
|
|
|
-
|
|
|
- .cover {
|
|
|
- width: 220rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- background: #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- margin-top: 12rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .grid-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 334rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .cover-box {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 190rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .cover {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background: #f0f0f0;
|
|
|
- }
|
|
|
-
|
|
|
- .overlay {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 60rpx;
|
|
|
- background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 16rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 22rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- margin-top: 16rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .index-cont {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 20upx 120rpx;
|
|
|
-
|
|
|
- .pub-item {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
-
|
|
|
- .tabs {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- height: 110rpx;
|
|
|
- background-color: #F0F3F4;
|
|
|
-
|
|
|
- .tab {
|
|
|
- height: 110rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .img {
|
|
|
- z-index: 1;
|
|
|
- position: absolute;
|
|
|
- top: 0rpx;
|
|
|
- left: 0rpx;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .inner {
|
|
|
- z-index: 2;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
-
|
|
|
- .active {
|
|
|
- color: #5B37FD ;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .pub-title-box {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 36upx 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .left {
|
|
|
- font-size: 32upx;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 24rpx;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- margin-right: 10upx;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- width: 14upx;
|
|
|
- height: 24upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .doc-tab-box {
|
|
|
- padding: 14rpx 30rpx 0rpx 30rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .tab-inner {
|
|
|
- padding: 14upx 0 30upx;
|
|
|
- display: flex;
|
|
|
- overflow-x: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- font-size: 28upx;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- margin-right: 40upx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- &.cases {
|
|
|
- margin-right: 60upx;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-bg {
|
|
|
- width: 72upx;
|
|
|
- height: 28upx;
|
|
|
- position: absolute;
|
|
|
- top: 17upx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-36upx);
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-mask {
|
|
|
- width: 56upx;
|
|
|
- height: 34upx;
|
|
|
- position: absolute;
|
|
|
- top: 25upx;
|
|
|
- right: 0upx;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .doc-list {
|
|
|
- padding: 20upx;
|
|
|
-
|
|
|
- .item {
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FFFFFF;
|
|
|
- // border-radius: 16upx;
|
|
|
- display: flex;
|
|
|
- border-bottom: 1px solid #F0F0F0;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .head-box {
|
|
|
- width: 120upx;
|
|
|
- height: 120upx;
|
|
|
- background: #EDF1F4;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 30upx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- width: calc(100% - 150upx);
|
|
|
-
|
|
|
- .top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-family: PingFang SC;
|
|
|
- line-height: 1;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 34upx;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .line {
|
|
|
- width: 1px;
|
|
|
- height: 26upx;
|
|
|
- background: #DDDDDD;
|
|
|
- margin: 0 20upx;
|
|
|
- }
|
|
|
-
|
|
|
- .other {
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .unit-box {
|
|
|
- display: flex;
|
|
|
- margin-top: 24upx;
|
|
|
-
|
|
|
- .level {
|
|
|
- padding: 0 10upx;
|
|
|
- height: 30upx;
|
|
|
- line-height: 30upx;
|
|
|
- font-size: 22upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- background: #5B37FD ;
|
|
|
- border-radius: 10upx 4upx 10upx 4upx;
|
|
|
- margin-right: 12upx;
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 28upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- line-height: 30upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .expertise {
|
|
|
- font-size: 26upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- line-height: 42upx;
|
|
|
- margin: 22upx 0 26upx;
|
|
|
- }
|
|
|
-
|
|
|
- .rate-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .star {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 22upx;
|
|
|
- height: 22upx;
|
|
|
- margin-right: 10upx;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 26upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #CEA764;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .line {
|
|
|
- width: 1px;
|
|
|
- height: 20upx;
|
|
|
- background: #DDDDDD;
|
|
|
- margin: 0 20upx;
|
|
|
- }
|
|
|
-
|
|
|
- .num-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-family: PingFang SC;
|
|
|
-
|
|
|
- .label {
|
|
|
- font-size: 24upx;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- line-height: 1;
|
|
|
- margin-right: 7px;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 26upx;
|
|
|
- font-weight: bold;
|
|
|
- color: #CEA764;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .price-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 38upx;
|
|
|
-
|
|
|
- .btn-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 164upx;
|
|
|
- height: 56upx;
|
|
|
- line-height: 56upx;
|
|
|
- border: 1px solid rgba(43, 199, 185, 0.5);
|
|
|
- border-radius: 28upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- margin-right: 30upx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .label {
|
|
|
- font-size: 26upx;
|
|
|
- font-weight: 500;
|
|
|
- color: #5B37FD ;
|
|
|
- margin-right: 5upx;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: bold;
|
|
|
- color: #5B37FD ;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .item:last-child {
|
|
|
- border-bottom: none;
|
|
|
- margin-bottom: 0rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-title {
|
|
|
- height: 50rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #5B37FD ;
|
|
|
-
|
|
|
- image {
|
|
|
- margin-left: 8rpx;
|
|
|
- width: 14rpx;
|
|
|
- height: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 医师团队
|
|
|
- .doc-cont {
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 30upx;
|
|
|
-
|
|
|
- .inner {
|
|
|
- padding: 4upx 0 40upx;
|
|
|
- display: flex;
|
|
|
- overflow-x: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- margin-right: 40upx;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .head-box {
|
|
|
- width: 120upx;
|
|
|
- height: 120upx;
|
|
|
- background: #F2F5F9;
|
|
|
- border-radius: 50%;
|
|
|
- margin-bottom: 20upx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- max-width: 120upx;
|
|
|
- font-size: 28upx;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111111;
|
|
|
- margin-bottom: 16upx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .position {
|
|
|
- max-width: 120upx;
|
|
|
- font-size: 24upx;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .inner {
|
|
|
- padding: 0 30upx;
|
|
|
- }
|
|
|
-
|
|
|
- // 健康知识
|
|
|
- .pub-tab-box {
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .tab-inner {
|
|
|
- padding: 14upx 0 30upx;
|
|
|
- display: flex;
|
|
|
- overflow-x: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .item {
|
|
|
- font-size: 28upx;
|
|
|
- white-space: nowrap;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- margin-right: 40upx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &.active {
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- &.cases {
|
|
|
- margin-right: 60upx;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-bg {
|
|
|
- width: 72upx;
|
|
|
- height: 28upx;
|
|
|
- position: absolute;
|
|
|
- top: 17upx;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-36upx);
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right-mask {
|
|
|
- width: 56upx;
|
|
|
- height: 34upx;
|
|
|
- position: absolute;
|
|
|
- top: 14upx;
|
|
|
- right: -30upx;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .know-list {
|
|
|
- padding-right: 10upx;
|
|
|
-
|
|
|
- .item {
|
|
|
- padding: 30upx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid #F0F0F0;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- padding-right: 40upx;
|
|
|
- height: 190upx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111111;
|
|
|
- line-height: 48upx;
|
|
|
- }
|
|
|
-
|
|
|
- .info-box {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .readers {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .head-box {
|
|
|
- margin-right: 27upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .head {
|
|
|
- width: 48upx;
|
|
|
- height: 48upx;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 0 0 1px #fff;
|
|
|
- margin-right: -10upx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .readings {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .eye {
|
|
|
- width: 26upx;
|
|
|
- height: 20upx;
|
|
|
- margin-right: 9upx;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 24upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .time {
|
|
|
- font-size: 24upx;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- width: 250upx;
|
|
|
- height: 190upx;
|
|
|
- border-radius: 8upx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 问诊案例
|
|
|
- .cases-list {
|
|
|
- padding-bottom: 10upx;
|
|
|
-
|
|
|
- .item {
|
|
|
- padding: 30upx 0;
|
|
|
- border-bottom: 1px solid #F0F0F0;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
-
|
|
|
- .dec-text {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- line-height: 48upx;
|
|
|
- }
|
|
|
-
|
|
|
- .images-box {
|
|
|
- margin-top: 10upx;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .img-item {
|
|
|
- width: 155upx;
|
|
|
- height: 155upx;
|
|
|
- background: #F5F5F5;
|
|
|
- border-radius: 8upx;
|
|
|
- margin: 0 10upx 10upx 0;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &:nth-child(4n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .doc-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 30upx 0 20upx;
|
|
|
-
|
|
|
- .head {
|
|
|
- width: 60upx;
|
|
|
- height: 60upx;
|
|
|
- background: #F2F5F9;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 20upx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 28upx;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .line {
|
|
|
- width: 1px;
|
|
|
- height: 22upx;
|
|
|
- background: #DDDDDD;
|
|
|
- margin: 0 16upx;
|
|
|
- }
|
|
|
-
|
|
|
- .posit,
|
|
|
- .address {
|
|
|
- font-size: 26upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .answer-box {
|
|
|
- width: 100%;
|
|
|
- background: #F5F7F7;
|
|
|
- border-radius: 10upx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .text-inner {
|
|
|
- // height: 84upx;
|
|
|
- font-size: 28upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- line-height: 42upx;
|
|
|
- padding: 15upx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .read-box {
|
|
|
- margin-top: 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 24upx;
|
|
|
- height: 19upx;
|
|
|
- margin-right: 10upx;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 24upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 精选药品
|
|
|
- .feat-title {
|
|
|
- margin-top: 30upx;
|
|
|
- padding: 10upx 0 33upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 37upx;
|
|
|
- height: 37upx;
|
|
|
- margin: 0upx 20upx;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
- font-size: 36upx;
|
|
|
- line-height: 1;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
+ /* 课程列表 */
|
|
|
+ .course-list {
|
|
|
+ .course-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
|
|
|
- .drug-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .item {
|
|
|
- margin-right: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- width: 345rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
|
|
|
- border-radius: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .img-box {
|
|
|
- width: 100%;
|
|
|
- height: 334upx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .info-box {
|
|
|
- box-sizing: border-box;
|
|
|
- height: 182upx;
|
|
|
- padding: 20upx;
|
|
|
-
|
|
|
- .title {
|
|
|
- height: 80upx;
|
|
|
- font-size: 26upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111111;
|
|
|
- line-height: 40upx;
|
|
|
- }
|
|
|
-
|
|
|
- .price-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 20upx;
|
|
|
-
|
|
|
- .now {
|
|
|
- color: #FF6633;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- margin-right: 20upx;
|
|
|
- font-family: PingFang SC;
|
|
|
-
|
|
|
- .unit {
|
|
|
- font-size: 24upx;
|
|
|
- line-height: 1.4;
|
|
|
- margin-right: 4upx;
|
|
|
- }
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 36upx;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .old {
|
|
|
- font-size: 26upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- text-decoration: line-through;
|
|
|
- color: #BBBBBB;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .item-thumb {
|
|
|
+ width: 260rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 健康生活大讲堂
|
|
|
- .open-class {
|
|
|
- padding: 20rpx;
|
|
|
- margin: 20rpx 15rpx 0rpx;
|
|
|
- // background-color: #f0f4f7;
|
|
|
|
|
|
- .title-box {
|
|
|
+ .item-content {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
|
|
|
- .title {
|
|
|
+ .item-title {
|
|
|
font-size: 32rpx;
|
|
|
+ color: #1A1A1A;
|
|
|
font-weight: bold;
|
|
|
+ line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
- .more {
|
|
|
- font-size: 24rpx;
|
|
|
- padding-left: 30rpx;
|
|
|
- color: #999999;
|
|
|
+ .item-footer {
|
|
|
display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
- image {
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .class-item {
|
|
|
- font-size: 24rpx;
|
|
|
- margin-top: 24rpx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 0 16rpx;
|
|
|
- margin-right: 14rpx;
|
|
|
- width: 250rpx;
|
|
|
- height: 280rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
-
|
|
|
- .img-box {
|
|
|
- height: 220rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 12rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .modules {
|
|
|
- .module {
|
|
|
- .depts {
|
|
|
- z-index: 101;
|
|
|
- margin: 20rpx 15rpx 0rpx;
|
|
|
- padding: 20rpx;
|
|
|
- //box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
|
|
|
- //background-color: #fff;
|
|
|
- border-radius: 15rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #2A2B2E;
|
|
|
- }
|
|
|
-
|
|
|
- .dept-box {
|
|
|
- margin-top: 15rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .dept {
|
|
|
- padding: 15rpx 5rpx;
|
|
|
- width: 25%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 14rpx 0;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 58rpx;
|
|
|
- height: 58rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size: 24upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .doctor-articles {
|
|
|
- z-index: 101;
|
|
|
- margin: 20rpx 15rpx 0rpx;
|
|
|
- padding: 20rpx;
|
|
|
- box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 15rpx;
|
|
|
-
|
|
|
- .title-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .more {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #9B9B9B;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- margin-left: 10rpx;
|
|
|
- width: 15rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .article-box {
|
|
|
- padding: 20rpx 0rpx;
|
|
|
- overflow-x: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- .article {
|
|
|
- width: 300rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- background: #f9f8fe;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-right: 0rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .image-box {
|
|
|
- width: 300rpx;
|
|
|
- height: 400rpx;
|
|
|
- position: relative;
|
|
|
- border-radius: 20rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- border-radius: 20rpx;
|
|
|
- width: 300rpx;
|
|
|
- height: 400rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .views {
|
|
|
- position: absolute;
|
|
|
- top: 0rpx;
|
|
|
- left: 0rpx;
|
|
|
- padding: 5rpx 10rpx;
|
|
|
- background: rgba(0, 0, 0, 0.25);
|
|
|
- border-radius: 12rpx 0px 12rpx 0px;
|
|
|
- opacity: 1;
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: PingFang SC-Bold, PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- .doctor {
|
|
|
- margin: 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- position: absolute;
|
|
|
- bottom: 0rpx;
|
|
|
- left: 0rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- border-radius: 50%;
|
|
|
- width: 64rpx;
|
|
|
- height: 64rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- width: 200rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .doc-name {
|
|
|
- width: 200rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .doc-position {
|
|
|
- width: 100%;
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #fff;
|
|
|
- font-weight: bold;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .article-title-box {
|
|
|
- width: 100%;
|
|
|
- margin-top: 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- .article-title {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #2A2B2E;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .doctors {
|
|
|
- z-index: 101;
|
|
|
- margin: 20rpx 15rpx;
|
|
|
- padding: 20rpx;
|
|
|
- box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 15rpx;
|
|
|
-
|
|
|
- .title-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .more {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #9B9B9B;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- margin-left: 10rpx;
|
|
|
- width: 15rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .articles {
|
|
|
- z-index: 101;
|
|
|
- margin: 20rpx 15rpx;
|
|
|
- padding: 20rpx;
|
|
|
- box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 15rpx;
|
|
|
-
|
|
|
- .title-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .more {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #9B9B9B;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- margin-left: 10rpx;
|
|
|
- width: 15rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .article-box {
|
|
|
- margin-top: 15rpx;
|
|
|
- padding: 20rpx 0rpx 0rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- height: 160rpx;
|
|
|
- margin-right: 15rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 28upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .views {
|
|
|
- font-size: 24upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #9a9a9c;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- image {
|
|
|
- border-radius: 10rpx;
|
|
|
- width: 220rpx;
|
|
|
- height: 160rpx;
|
|
|
- border: 1px solid #eeeeee;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .packages {
|
|
|
- z-index: 101;
|
|
|
- margin: 20rpx 15rpx;
|
|
|
- padding: 20rpx;
|
|
|
- box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 15rpx;
|
|
|
-
|
|
|
- .title-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 32upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .more {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
-
|
|
|
- .text {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #9B9B9B;
|
|
|
- }
|
|
|
-
|
|
|
- image {
|
|
|
- margin-left: 10rpx;
|
|
|
- width: 15rpx;
|
|
|
- height: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ .item-playback {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #CCCCCC;
|
|
|
}
|
|
|
|
|
|
- .package-box {
|
|
|
- padding: 20rpx 0rpx 0rpx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: calc(50% - 20rpx);
|
|
|
- border-radius: 15rpx;
|
|
|
- margin: 10rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
-
|
|
|
- &:last-child {}
|
|
|
-
|
|
|
- .top {
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- border-radius: 15rpx 15rpx 0rpx 0rpx;
|
|
|
- width: 100%;
|
|
|
- height: 300rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .bottom {
|
|
|
- width: 100%;
|
|
|
- margin-top: 15rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #111111;
|
|
|
- }
|
|
|
-
|
|
|
- .price-box {
|
|
|
- margin-top: 10rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .price {
|
|
|
- padding: 5rpx 10rpx;
|
|
|
- background-color: #5B37FD ;
|
|
|
- border-radius: 30rpx;
|
|
|
- font-size: 20upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
-
|
|
|
- .count {
|
|
|
- font-size: 24upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .study-btn {
|
|
|
+ padding: 12rpx 40rpx;
|
|
|
+ background: #5B37FD;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .official-account {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 100upx;
|
|
|
- position: fixed;
|
|
|
- bottom: 30upx;
|
|
|
- z-index: 99;
|
|
|
- padding: 0 20upx 180rpx 20upx;
|
|
|
- }
|
|
|
-
|
|
|
- // 消息
|
|
|
- .message-box {
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
- height: 84upx;
|
|
|
- background: #F3FFFD;
|
|
|
- border: 1px solid #C7E9E5;
|
|
|
- box-shadow: 0px 4upx 12upx 0px rgba(90, 203, 138, 0.16);
|
|
|
- border-radius: 16upx;
|
|
|
- position: fixed;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 30upx;
|
|
|
- z-index: 99;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 20upx 0 30upx;
|
|
|
-
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 24upx;
|
|
|
- height: 24upx;
|
|
|
- margin-right: 18upx;
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- width: 90%;
|
|
|
- font-size: 28upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #5B37FD ;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 100upx;
|
|
|
- height: 48upx;
|
|
|
- line-height: 48upx;
|
|
|
- text-align: center;
|
|
|
- font-size: 24upx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- border: 1px solid #D2E6FF;
|
|
|
- background: linear-gradient(135deg, #5B37FD 0%, #5B37FD 100%);
|
|
|
- border-radius: 24upx;
|
|
|
- margin-left: 30upx;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
- .contact-btn {
|
|
|
- display: inline-block;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- opacity: 0;
|
|
|
+ .ellipsis-2 {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .popup-box {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- z-index: 999;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .info-mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background-color: rgba($color: #000000, $alpha: 0.5);
|
|
|
- z-index: 999;
|
|
|
- }
|
|
|
-
|
|
|
- .info-form {
|
|
|
- z-index: 1000;
|
|
|
- width: 450rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .bottom-safe-area {
|
|
|
+ height: 160rpx;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
