XiaoETech_app/pages/faxian/index.vue

<template>
  <view class="work-container">
    <!-- 第一块内容 -->
    <view class="section" @click="handleCourseSelection">
      <view class="icon-and-text">
        <!-- 假设使用 iconfont 图标 -->
        <view class="iconfont1 icon-jxa text-red icon"></view>
        <view class="text-content">
          <text class="course-title">课程精选</text>
          <text class="no-new-message">暂无新消息</text>
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <view class="divider"></view>
    <!-- 第二块内容 -->
    <view class="section" @click="handleCourseUpdate">
      <view class="icon-and-text">
        <view class="iconfont1 icon-kechengshangxin text-bule icon"></view>
        <view class="text-content">
          <text class="course-title">课程上新</text>
          <text class="no-new-message">暂无新消息</text>
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <view class="divider"></view>
    <!-- 第三块内容 -->
    <view class="section" @click="handleLiveBooking">
      <view class="icon-and-text">
        <view class="iconfont1 icon-zhiboyuyue text-purple icon"></view>
        <view class="text-content">
          <text class="course-title">直播预约</text>
          <text class="no-new-message">暂无新消息</text>
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <view class="divider"></view>
    <!-- 第四块内容 -->
    <view class="section" @click="handleCircleMessage">
      <view class="icon-and-text">
        <view class="iconfont1 icon-quanzixiaoxihover text-green icon"></view>
        <view class="text-content">
          <text class="course-title">圈子消息</text>
          <text class="no-new-message">暂无新消息</text>
        </view>
      </view>
    </view>
    <view class="divider"></view>
  </view>
</template>

<script>
export default {
  methods: {
    // 处理课程精选点击事件
    handleCourseSelection() {
      console.log('点击了课程精选');
      // 这里可以添加具体的业务逻辑
	  this.$modal.showToast('模块建设中~')
    },
    // 处理课程上新点击事件
    handleCourseUpdate() {
      console.log('点击了课程上新');
      // 这里可以添加具体的业务逻辑
	  this.$modal.showToast('模块建设中~')
    },
    // 处理直播预约点击事件
    handleLiveBooking() {
      console.log('点击了直播预约');
      // 这里可以添加具体的业务逻辑
	  this.$modal.showToast('模块建设中~')
    },
    // 处理圈子消息点击事件
    handleCircleMessage() {
      console.log('点击了圈子消息');
      // 这里可以添加具体的业务逻辑
	  this.$modal.showToast('模块建设中~')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/static/fontico/iconfont.css';
  .section {
    padding: 20px;
    min-height: 100px; 
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .divider {
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
  }

  .iconfont1 {
    font-size: 36px; 
  }

  .course-title {
    font-size: 20px; 
    font-weight: bold; 
  }

  .icon-and-text {
    display: flex;
    flex-direction: row; // 修改为水平排列
    align-items: center;
    gap: 15px; // 设置图标和文字之间的间距
  }

  .text-content {
    display: flex;
    flex-direction: column;
  }

  .no-new-message {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
</style>