Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 3511ea65 作者: 方治民
操作

feat: 优化我的、农知界面

上级 be88ecc2
正在显示 包含 359 行增加 和 182 行删除
src/pages/mine/index.vue
...@@ -79,8 +79,8 @@ ...@@ -79,8 +79,8 @@
const items = reactive<Recordable[]>([ const items = reactive<Recordable[]>([
{ {
title: '农场主', title: '我的农场',
icon: 'nongchang', icon: 'nongchang2',
disabled: false, disabled: false,
show: true, show: true,
handle: () => { handle: () => {
...@@ -212,7 +212,7 @@ ...@@ -212,7 +212,7 @@
height="42" height="42"
background="transparent" background="transparent"
/> />
<text class="ml-3.5 text-30 text-#333333 font-500">{{ item.title }}</text> <text class="ml-3.5 text-30 text-#67c17a font-bold">{{ item.title }}</text>
</fui-list-cell> </fui-list-cell>
</fui-list> </fui-list>
<fui-list class="rd-3 overflow-hidden shadow !mt-20rpx" :top-border="false"> <fui-list class="rd-3 overflow-hidden shadow !mt-20rpx" :top-border="false">
......
src/pages/nongzhi/nongzhi.vue
<script> e:\Downloads\农场 (1).png
export default { <script setup lang="ts">
components: {}, import { reactive } from 'vue'
props: {}, import { onPullDownRefresh } from '@dcloudio/uni-app'
data() {
return {}
},
methods: {},
onPullDownRefresh() { // 下拉刷新
onPullDownRefresh(() => {
setTimeout(function () { setTimeout(function () {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
Message.toast('刷新成功') Message.toast('刷新成功')
}, 1000) }, 1000)
})
// 页面数据
const pageData = reactive({
// 顶部标题和搜索
header: {
title: '农知',
searchPlaceholder: '请输入搜索内容',
searchIcon: '/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png',
bannerImage: '/static/images/codefun/9c9b4490074d34c2eb0b1e2e2e543fce.png',
},
// 分类标签
categoryTabs: [
{ id: 1, name: '精选' },
{ id: 2, name: '养殖技术' },
{ id: 3, name: '水果种植' },
{ id: 4, name: '蔬菜种植' },
],
// 推荐专家
recommendedExperts: {
title: '推荐专家',
moreText: '更多',
experts: [
{
id: 1,
image: '/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png',
name: '李大树',
specialty: '果树专家',
solvedCount: '以解答311个问题',
actionText: '免费咨询',
},
{
id: 2,
image: '/static/images/codefun/dd9d3f56e39526077ca1f71ba4092491.png',
name: '张曼',
specialty: '蔬菜专家',
solvedCount: '以解答186个问题',
actionText: '免费咨询',
},
{
id: 3,
image: '/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png',
name: '王于苗',
specialty: '果树专家',
solvedCount: '以解答311个问题',
actionText: '免费咨询',
},
],
},
// 专家问答
expertQAs: {
title: '专家问答',
moreText: '更多',
questions: [
{
id: 1,
question: '苹果树春季该如何进行修剪？',
answer: '春季修剪应在萌芽前进行，重点去除病弱枝...',
followers: '24人关注',
},
{
id: 2,
question: '水稻秧苗发黄是什么原因？',
answer: '主要原因可能是养分不足、浸水过多或病虫害...',
followers: '18人关注',
},
{
id: 3,
question: '大棚黄瓜叶子发卷怎么处理？',
answer: '可能是由于温度过高、水分不足或病毒感染...',
followers: '32人关注',
},
],
},
// 精品课程
premiumCourses: {
title: '精品课程',
moreText: '更多',
courses: [
{
id: 1,
image: '', // 使用section_11的背景图
title: '高效果园管理技术',
description: '全面提升果园产量与品质',
price: '¥99',
originalPrice: '¥129',
actionText: '马上学',
free: false,
}, },
{
id: 2,
image: '', // 使用section_12的背景图
title: '水稻病虫害防治专题',
description: '预防与治疗水稻常见问题',
price: '¥0',
originalPrice: '¥99',
actionText: '马上学',
free: true,
freeText: '免费',
},
{
id: 3,
image: '', // 使用section_13的背景图
title: '蔬菜大棚种植要点',
description: '温室蔬菜四季种植技巧',
price: '¥129',
originalPrice: '¥159',
actionText: '马上学',
free: false,
},
{
id: 4,
image: '', // 使用section_14的背景图
title: '珍珠鸡养殖技巧',
description: '珍珠鸡养殖技巧与常见问题',
price: '¥149',
originalPrice: '¥199',
actionText: '马上学',
free: false,
},
],
},
// 推荐文章
recommendedArticles: {
title: '推荐文章',
moreText: '更多',
articles: [
{
id: 1,
image: '/static/images/codefun/ea2c9cb4b1cb479a8164a6ad745a7a9d.png',
title: '春季麦田管理要点',
views: '7335',
},
{
id: 2,
image: '/static/images/codefun/3f49c887f73048daa48ecc834bc32e49.png',
title: '农作物施肥技术指南',
views: '3235',
},
{
id: 3,
image: '/static/images/codefun/17706769e0f74252bc26be7a373cc674.png',
title: '果树花期管理方法',
views: '1245',
},
],
},
})
// 分类标签点击事件
function onCategoryTabClick(tab: any) {
console.log('点击分类标签:', tab)
// 在这里添加具体的分类标签点击逻辑
}
// 查看更多推荐专家
function onViewMoreExperts() {
console.log('查看更多推荐专家')
// 在这里添加具体的查看逻辑
}
// 专家点击事件
function onExpertClick(expert: any) {
console.log('点击专家:', expert)
// 在这里添加具体的专家点击逻辑
}
// 免费咨询点击事件
function onFreeConsultClick(expert: any) {
console.log('点击免费咨询:', expert)
// 在这里添加具体的免费咨询点击逻辑
}
// 查看更多专家问答
function onViewMoreQAs() {
console.log('查看更多专家问答')
// 在这里添加具体的查看逻辑
}
// 问题点击事件
function onQuestionClick(question: any) {
console.log('点击问题:', question)
// 在这里添加具体的问题点击逻辑
}
// 查看更多精品课程
function onViewMoreCourses() {
console.log('查看更多精品课程')
// 在这里添加具体的查看逻辑
}
// 课程点击事件
function onCourseClick(course: any) {
console.log('点击课程:', course)
// 在这里添加具体的课程点击逻辑
}
// 马上学点击事件
function onStudyNowClick(course: any) {
console.log('点击马上学:', course)
// 在这里添加具体的马上学点击逻辑
}
// 查看更多推荐文章
function onViewMoreArticles() {
console.log('查看更多推荐文章')
// 在这里添加具体的查看逻辑
}
// 文章点击事件
function onArticleClick(article: any) {
console.log('点击文章:', article)
// 在这里添加具体的文章点击逻辑
} }
</script> </script>
...@@ -22,296 +235,260 @@ ...@@ -22,296 +235,260 @@
<view class="codefun-flex-col"> <view class="codefun-flex-col">
<view class="codefun-flex-col section"> <view class="codefun-flex-col section">
<view class="codefun-flex-col mt-60rpx"> <view class="codefun-flex-col mt-60rpx">
<text class="codefun-self-center font_9 text">农知</text> <text class="codefun-self-center font_9 text">{{ pageData.header.title }}</text>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-20"> <view class="codefun-flex-col codefun-self-stretch codefun-mt-20">
<view class="codefun-flex-row codefun-items-center section_2"> <view class="codefun-flex-row codefun-items-center section_2 !hidden">
<image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" /> <image class="image_5" :src="pageData.header.searchIcon" />
<text class="font_2 codefun-ml-8">请输入搜索内容</text> <text class="font_2 codefun-ml-8">{{ pageData.header.searchPlaceholder }}</text>
</view> </view>
<image <image class="image_6" :src="pageData.header.bannerImage" />
class="image_6 codefun-mt-12"
src="/static/images/codefun/9c9b4490074d34c2eb0b1e2e2e543fce.png"
/>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-col group_2"> <view class="codefun-flex-col group_2">
<view class="codefun-flex-row codefun-justify-around group_1"> <view class="codefun-flex-row codefun-justify-around group_1">
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_3"> <view
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"> v-for="tab in pageData.categoryTabs"
<text class="font_2">精选</text> :key="tab.id"
</view> class="codefun-flex-col codefun-justify-start codefun-items-center"
</view> :class="[tab.id === 1 ? 'section_3' : 'section_4']"
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_4"> @click="onCategoryTabClick(tab)"
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1"> >
<text class="font_3">养殖技术</text> <view
</view> class="codefun-flex-col codefun-justify-start"
</view> :class="[
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_4"> tab.id === 1 ? 'codefun-items-center' : 'codefun-items-start',
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1"> tab.id === 1 ? 'text-wrapper' : 'text-wrapper_1',
<text class="font_3">水果种植</text> ]"
</view> >
</view> <text :class="[tab.id === 1 ? 'font_2' : 'font_3']">
<view class="codefun-flex-col codefun-justify-start codefun-items-center section_4"> {{ tab.name }}
<view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1"> </text>
<text class="font_3">蔬菜种植</text>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-col group_3 mt-25"> <view class="codefun-flex-col group_3 mt-25">
<view class="codefun-flex-row codefun-justify-between codefun-items-baseline"> <view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
<text class="font_4">推荐专家</text> <text class="font_4">{{ pageData.recommendedExperts.title }}</text>
<text class="font_5 text_7">更多</text> <text class="font_5 text_7" @click="onViewMoreExperts">{{
pageData.recommendedExperts.moreText
}}</text>
</view> </view>
<view class="codefun-flex-row horiz-list codefun-mt-16"> <view class="codefun-flex-row horiz-list codefun-mt-16">
<view class="codefun-flex-col horiz-list-item section_5">
<image
class="codefun-self-stretch image_7"
src="/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png"
/>
<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12">
<text class="font text_8">李大树</text>
<text class="font_6 text_8 codefun-ml-8">果树专家</text>
</view>
<text class="codefun-self-start font_7 text_8 codefun-mt-12">以解答311个问题</text>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12" v-for="(expert, index) in pageData.recommendedExperts.experts"
:key="expert.id"
class="codefun-flex-col horiz-list-item"
:class="[
index === 0 ? 'section_5' : '',
index === 1 ? 'section_6' : '',
index === 2 ? 'section_7' : '',
index > 0 ? `codefun-ml-${index === 1 ? 10 : 10}` : '',
]"
@click="onExpertClick(expert)"
> >
<text class="font_8">免费咨询</text>
</view>
</view>
<view class="codefun-flex-col horiz-list-item section_6 codefun-ml-10">
<image <image
class="codefun-self-stretch image_7" class="image_7"
src="/static/images/codefun/dd9d3f56e39526077ca1f71ba4092491.png" :class="[index < 2 ? 'codefun-self-stretch' : '']"
:src="expert.image"
/> />
<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12"> <view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12">
<text class="font text_8">张曼</text> <text class="font text_8">{{ expert.name }}</text>
<text class="font_6 text_8 codefun-ml-8">蔬菜专家</text> <text class="font_6 text_8 codefun-ml-8">{{ expert.specialty }}</text>
</view> </view>
<text class="codefun-self-start font_7 text_8 codefun-mt-12">以解答186个问题</text> <text class="codefun-self-start font_7 text_8 codefun-mt-12">{{ expert.solvedCount }}</text>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12"
@click.stop="onFreeConsultClick(expert)"
> >
<text class="font_8">免费咨询</text> <text class="font_8">{{ expert.actionText }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-items-start horiz-list-item section_7 codefun-ml-10">
<image class="image_7" src="/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png" />
<text class="font text_8 codefun-mt-12">王于苗</text>
<text class="font_7 text_8 codefun-mt-12">以解答311个问题</text>
<view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 codefun-mt-12"
>
<text class="font_8">免费咨询</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-col mt-25"> <view class="codefun-flex-col mt-25">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_5"> <view class="codefun-flex-row codefun-justify-between codefun-items-center group_5">
<text class="font_4">专家问答</text> <text class="font_4">{{ pageData.expertQAs.title }}</text>
<text class="font_5 text_4">更多</text> <text class="font_5 text_4" @click="onViewMoreQAs">{{ pageData.expertQAs.moreText }}</text>
</view> </view>
<view class="codefun-flex-col section_10"> <view class="codefun-flex-col section_10">
<view class="codefun-flex-col codefun-self-stretch">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" v-for="(qa, index) in pageData.expertQAs.questions"
:key="qa.id"
class="codefun-flex-col"
:class="[index > 0 ? 'codefun-self-stretch codefun-mt-10' : 'codefun-self-stretch']"
@click="onQuestionClick(qa)"
> >
<text class="font_9">Q</text>
</view>
<text class="font_10 codefun-ml-8">苹果树春季该如何进行修剪？</text>
</view>
<text class="codefun-self-start font_11 codefun-mt-4 text_23">
春季修剪应在萌芽前进行，重点去除病弱枝...
</text>
</view>
<text class="codefun-self-start font_14 text_23 codefun-mt-10">24人关注</text>
<view class="codefun-flex-col codefun-self-stretch codefun-mt-10">
<view class="codefun-flex-row codefun-items-center codefun-self-stretch"> <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
> >
<text class="font_9">Q</text> <text class="font_9">Q</text>
</view> </view>
<text class="font_10 codefun-ml-8">水稻秧苗发黄是什么原因？</text> <text class="font_10 codefun-ml-8">{{ qa.question }}</text>
</view> </view>
<text class="codefun-self-start font_11 codefun-mt-4 text_23"> <text
主要原因可能是养分不足、浸水过多或病虫害... class="codefun-self-start font_11 codefun-mt-4"
:class="[`text_2${index === 0 ? '3' : index === 1 ? '6' : '9'}`]"
>
{{ qa.answer }}
</text> </text>
</view> <text
<text class="codefun-self-start font_14 text_26 codefun-mt-10">18人关注</text> class="codefun-self-start font_14"
<view class="codefun-flex-col codefun-self-stretch codefun-mt-10"> :class="[
<view class="codefun-flex-row codefun-items-center codefun-self-stretch"> `text_2${index === 0 ? '3' : index === 1 ? '6' : '9'}`,
<view index === 0 ? 'codefun-mt-10' : 'codefun-mt-10',
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4" ]"
> >
<text class="font_9">Q</text> {{ qa.followers }}
</view>
<text class="font_10 codefun-ml-8">大棚黄瓜叶子发卷怎么处理？</text>
</view>
<text class="codefun-self-start font_11 codefun-mt-4 text_23">
可能是由于温度过高、水分不足或病毒感染...
</text> </text>
</view> </view>
<text class="codefun-self-start font_14 text_29 codefun-mt-10">32人关注</text>
</view> </view>
</view> </view>
<view class="codefun-flex-col mt-25"> <view class="codefun-flex-col mt-25">
<view class="codefun-flex-row codefun-justify-between group_5"> <view class="codefun-flex-row codefun-justify-between group_5">
<text class="codefun-self-center font_4">精品课程</text> <text class="codefun-self-center font_4">{{ pageData.premiumCourses.title }}</text>
<text class="codefun-self-start font_5 text_4">更多</text> <text class="codefun-self-start font_5 text_4" @click="onViewMoreCourses">{{
pageData.premiumCourses.moreText
}}</text>
</view> </view>
<view class="codefun-flex-col section_10"> <view class="codefun-flex-col section_10">
<view class="codefun-flex-row codefun-justify-center codefun-items-end"> <view
v-for="(course, index) in pageData.premiumCourses.courses"
:key="course.id"
class="codefun-flex-row"
:class="[
index === 0 ? 'codefun-justify-center codefun-items-end' : '',
index === 1 ? 'codefun-justify-center codefun-mt-16' : '',
index === 2 ? 'codefun-items-end codefun-mt-16' : '',
index === 3 ? 'codefun-mt-16' : '',
]"
@click="onCourseClick(course)"
>
<template v-if="index === 0">
<view class="section_11" /> <view class="section_11" />
<view class="codefun-flex-col codefun-items-start group_10 codefun-ml-12"> <view class="codefun-flex-col codefun-items-start group_10 codefun-ml-12">
<text class="font_10">高效果园管理技术</text> <text class="font_10">{{ course.title }}</text>
<text class="font_11 codefun-mt-8 single-line w-11em">全面提升果园产量与品质</text> <text class="font_11 codefun-mt-8 single-line w-11em">{{
course.description
}}</text>
<view class="codefun-flex-row codefun-items-center group_11 codefun-mt-8"> <view class="codefun-flex-row codefun-items-center group_11 codefun-mt-8">
<text class="font_13">¥99</text> <text class="font_13">{{ course.price }}</text>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
> >
<text class="font_14 text_34">¥129</text> <text class="font_14 text_34">{{ course.originalPrice }}</text>
</view> </view>
</view> </view>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 view_1 codefun-ml-12" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 view_1 codefun-ml-12"
@click.stop="onStudyNowClick(course)"
> >
<text class="font_8">马上学</text> <text class="font_8">{{ course.actionText }}</text>
</view>
</view> </view>
<view class="codefun-flex-row codefun-justify-center codefun-mt-16"> </template>
<template v-else-if="index === 1">
<view class="codefun-flex-col codefun-justify-start codefun-items-start section_12"> <view class="codefun-flex-col codefun-justify-start codefun-items-start section_12">
<view <view
v-if="course.free"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_7" class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_7"
> >
<text class="font_15 text_37">免费</text> <text class="font_15 text_37">{{ course.freeText }}</text>
</view> </view>
</view> </view>
<view class="codefun-flex-col codefun-self-center codefun-ml-12"> <view class="codefun-flex-col codefun-self-center codefun-ml-12">
<text class="font_10">水稻病虫害防治专题</text> <text class="font_10">{{ course.title }}</text>
<text class="font_11 text_10 single-line w-11em">预防与治疗水稻常见问题</text> <text class="font_11 text_10 single-line w-11em">{{ course.description }}</text>
<view class="codefun-flex-row codefun-items-baseline group_8"> <view class="codefun-flex-row codefun-items-baseline group_8">
<text class="font_13">¥0</text> <text class="font_13">{{ course.price }}</text>
<text class="font_14 text_34 codefun-ml-4">¥99</text> <text class="font_14 text_34 codefun-ml-4">{{ course.originalPrice }}</text>
</view> </view>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_5 view codefun-ml-12" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_5 view codefun-ml-12"
@click.stop="onStudyNowClick(course)"
> >
<text class="font_8">马上学</text> <text class="font_8">{{ course.actionText }}</text>
</view> </view>
</view> </template>
<view class="codefun-flex-row codefun-items-end codefun-mt-16"> <template v-else-if="index === 2">
<view class="codefun-shrink-0 section_13" /> <view class="codefun-shrink-0 section_13" />
<view class="codefun-flex-col codefun-items-start codefun-flex-1 group_12"> <view class="codefun-flex-col codefun-items-start codefun-flex-1 group_12">
<text class="font_10">蔬菜大棚种植要点</text> <text class="font_10">{{ course.title }}</text>
<text class="font_11 codefun-mt-10 single-line w-11em">温室蔬菜四季种植技巧</text> <text class="font_11 codefun-mt-10 single-line w-11em">{{
course.description
}}</text>
<view class="codefun-flex-row codefun-items-center group_13 codefun-mt-10"> <view class="codefun-flex-row codefun-items-center group_13 codefun-mt-10">
<text class="font_13">¥129</text> <text class="font_13">{{ course.price }}</text>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
> >
<text class="font_14 text_34">¥159</text> <text class="font_14 text_34">{{ course.originalPrice }}</text>
</view> </view>
</view> </view>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
@click.stop="onStudyNowClick(course)"
> >
<text class="font_8">马上学</text> <text class="font_8">{{ course.actionText }}</text>
</view>
</view> </view>
<view class="codefun-flex-row codefun-mt-16"> </template>
<template v-else-if="index === 3">
<view class="codefun-shrink-0 section_14" /> <view class="codefun-shrink-0 section_14" />
<view class="codefun-flex-row codefun-items-end codefun-flex-1 group_14 codefun-ml-12"> <view class="codefun-flex-row codefun-items-end codefun-flex-1 group_14 codefun-ml-12">
<view class="codefun-flex-col codefun-items-start codefun-flex-1 group_27"> <view class="codefun-flex-col codefun-items-start codefun-flex-1 group_27">
<text class="font_10">珍珠鸡养殖技巧</text> <text class="font_10">{{ course.title }}</text>
<text class="font_11 codefun-mt-8 single-line w-11em"> <text class="font_11 codefun-mt-8 single-line w-11em">
珍珠鸡养殖技巧与常见问题 {{ course.description }}
</text> </text>
<view class="codefun-flex-row codefun-items-center group_13 codefun-mt-8"> <view class="codefun-flex-row codefun-items-center group_13 codefun-mt-8">
<text class="font_13">¥149</text> <text class="font_13">{{ course.price }}</text>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
> >
<text class="font_14 text_34">¥199</text> <text class="font_14 text_34">{{ course.originalPrice }}</text>
</view> </view>
</view> </view>
</view> </view>
<view <view
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5" class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
@click.stop="onStudyNowClick(course)"
> >
<text class="font_8">马上学</text> <text class="font_8">{{ course.actionText }}</text>
</view> </view>
</view> </view>
</template>
</view> </view>
</view> </view>
</view> </view>
<view class="codefun-flex-col mt-25"> <view class="codefun-flex-col mt-25">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_16"> <view class="codefun-flex-row codefun-justify-between codefun-items-center group_16">
<text class="font_4">推荐文章</text> <text class="font_4">{{ pageData.recommendedArticles.title }}</text>
<text class="font_5 text_48">更多</text> <text class="font_5 text_48" @click="onViewMoreArticles">{{
pageData.recommendedArticles.moreText
}}</text>
</view> </view>
<view class="codefun-flex-col section_15"> <view class="codefun-flex-col section_15">
<view class="codefun-flex-row group_17"> <view
<view class="w-200rpx h-124rpx"> v-for="article in pageData.recommendedArticles.articles"
<image :key="article.id"
class="w-full h-full" class="codefun-flex-row group_17"
src="/static/images/codefun/ea2c9cb4b1cb479a8164a6ad745a7a9d.png" :class="{ 'codefun-mt-32': article.id > 1 }"
mode="scaleToFill" @click="onArticleClick(article)"
/> >
</view>
<view class="flex-1 ml-4">
<text class="codefun-self-end font_16">春季麦田管理要点</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
<image
class="image_3"
src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
/>
<text class="font_7 codefun-ml-4">7335</text>
</view>
</view>
</view>
<view class="codefun-flex-row group_17 codefun-mt-32">
<view class="w-200rpx h-124rpx">
<image
class="w-full h-full"
src="/static/images/codefun/3f49c887f73048daa48ecc834bc32e49.png"
mode="scaleToFill"
/>
</view>
<view class="flex-1 ml-4">
<text class="codefun-self-end font_16">农作物施肥技术指南</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
<image
class="image_3"
src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
/>
<text class="font_7 codefun-ml-4">3235</text>
</view>
</view>
</view>
<view class="codefun-flex-row group_17 codefun-mt-32">
<view class="w-200rpx h-124rpx"> <view class="w-200rpx h-124rpx">
<image <image class="w-full h-full" :src="article.image" mode="scaleToFill" />
class="w-full h-full"
src="/static/images/codefun/17706769e0f74252bc26be7a373cc674.png"
mode="scaleToFill"
/>
</view> </view>
<view class="flex-1 ml-4"> <view class="flex-1 ml-4">
<text class="codefun-self-end font_16">果树花期管理方法</text> <text class="codefun-self-end font_16">{{ article.title }}</text>
<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20"> <view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
<image <image
class="image_3" class="image_3"
src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png" src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
/> />
<text class="font_7 codefun-ml-4">1245</text> <text class="font_7 codefun-ml-4">{{ article.views }}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -640,7 +817,7 @@ ...@@ -640,7 +817,7 @@
} }
.font_8 { .font_8 {
font-size: 24rpx; font-size: 24rpx;
line-height: 24rpx; line-height: 17rpx;
color: #ffffff; color: #ffffff;
} }
.group_16 { .group_16 {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论