zhxy-jsd/src/pages/view/routine/RengJiaoRengZhi/index.vue

<template>
  <view class="container">
    <view class="content">
              <!-- 党政职务 -->
        <view class="section">
          <view class="section-title">党政职务：</view>
          <view class="position-display">
            <text class="position-text" v-for="item in partyPositions" :key="item.id">
              {{ item.name }}
            </text>
          </view>
        </view>

        <!-- 其他职务 -->
        <view class="section">
          <view class="section-title">其他职务</view>
          <view class="position-display">
            <text class="position-text" v-for="item in otherPositions" :key="item.id">
              {{ item.name }}
            </text>
          </view>
        </view>

      <!-- 任职信息列表 -->
      <view class="info-list">
        <view class="info-item" v-for="item in teachingInfo" :key="item.key">
          <view class="info-label">{{ item.label }}</view>
                      <view class="info-value">
              <text :class="{ empty: item.isEmpty }">{{ item.value }}</text>
            </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";

// 党政职务数据
const partyPositions = ref([
  { id: 1, name: "党委（总支）书记" },
  { id: 2, name: "党委（总支）副书记" },
]);

// 其他职务数据
const otherPositions = ref([{ id: 1, name: "党支部支委" }]);

// 任教任职信息
const teachingInfo = ref([
  {
    key: "mainSubject",
    label: "主任学科",
    value: "音乐",
    isEmpty: false,
  },
  {
    key: "mainClass",
    label: "主任班级",
    value: "未填写",
    isEmpty: true,
  },
  {
    key: "partTimeSubject",
    label: "兼任学科",
    value: "未填写",
    isEmpty: true,
  },
  {
    key: "partTimeClass",
    label: "兼任班级",
    value: "未填写",
    isEmpty: true,
  },
  {
    key: "grade",
    label: "所属年级",
    value: "一年级(2024级)",
    isEmpty: false,
  },
  {
    key: "headTeacherClass",
    label: "所任班主任班级",
    value: "8班",
    isEmpty: false,
  },
]);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding-bottom: 40rpx;
}

.section {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding: 30rpx;

  .section-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
}

// 职务展示
.position-display {
  .position-text {
    display: inline-block;
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
    margin-bottom: 10rpx;
    
    &:not(:last-child)::after {
      content: '、';
      margin-left: 0;
      margin-right: 0;
    }
  }
}

// 信息列表
.info-list {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  margin: 0 30rpx;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .info-label {
    font-size: 28rpx;
    color: #333;
    flex-shrink: 0;
  }

    .info-value {
    flex: 1;
    text-align: right;
    
    text {
      font-size: 28rpx;
      color: #333;
      
      &.empty {
        color: #999;
      }
    }
  }
}
</style>