medical-mall/pages/mall/admin/maintain/sys/info.uvue

<template>
  <view class="admin-page">
    <view class="admin-sections">
      <!-- 商业授权 -->
      <view class="admin-card info-section">
        <view class="section-header">
          <text class="section-title">商业授权</text>
        </view>
        <view class="table-container header-table">
          <view class="table-header">
            <view class="col col-title"><text>产品证书编号</text></view>
            <view class="col col-action"><text>操作</text></view>
          </view>
          <view class="table-body">
            <view class="table-row">
              <view class="col col-title"><text>ZC2884891</text></view>
              <view class="col col-action">
                <text class="action-btn" @click="gotoOfficial">进入官网</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 自定义版权信息 -->
      <view class="admin-card info-section mt-24">
        <view class="section-header">
          <text class="section-title">自定义版权信息</text>
        </view>
        <view class="table-container header-table">
          <view class="table-header">
            <view class="col col-text"><text>文字版权信息</text></view>
            <view class="col col-image"><text>底部版权图片</text></view>
            <view class="col col-action"><text>操作</text></view>
          </view>
          <view class="table-body">
            <view class="table-row">
              <view class="col col-text"><text></text></view>
              <view class="col col-image"><text></text></view>
              <view class="col col-action">
                <text class="action-btn" @click="editCopyright">编辑</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务器信息 -->
      <view class="admin-card info-section mt-24">
        <view class="section-header">
          <text class="section-title">服务器信息</text>
        </view>
        <view class="table-container header-table">
          <view class="table-header">
            <view class="col col-env"><text>环境</text></view>
            <view class="col col-req"><text>要求</text></view>
            <view class="col col-status"><text>状态</text></view>
          </view>
          <view class="table-body">
            <view class="table-row">
              <view class="col col-env"><text>服务器系统</text></view>
              <view class="col col-req"><text>类UNIX</text></view>
              <view class="col col-status"><text>Linux</text></view>
            </view>
            <view class="table-row">
              <view class="col col-env"><text>WEB环境</text></view>
              <view class="col col-req"><text>Apache/Nginx/IIS</text></view>
              <view class="col col-status"><text>nginx/1.24.0</text></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 系统环境要求 -->
      <view class="admin-card info-section mt-24">
        <view class="section-header">
          <text class="section-title">系统环境要求</text>
        </view>
        <view class="table-container header-table">
          <view class="table-header">
            <view class="col col-env"><text>环境</text></view>
            <view class="col col-req"><text>要求</text></view>
            <view class="col col-status"><text>状态</text></view>
          </view>
          <view class="table-body">
            <view class="table-row">
              <view class="col col-env"><text>PHP版本</text></view>
              <view class="col col-req"><text>7.1-7.4</text></view>
              <view class="col col-status"><text>7.4.33</text></view>
            </view>
            <view class="table-row">
              <view class="col col-env"><text>MySQL版本</text></view>
              <view class="col col-req"><text>5.6-8.0</text></view>
              <view class="col col-status"><text>8.0.35</text></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
function gotoOfficial() {
  uni.showToast({ title: '正在打开官网...', icon: 'none' })
}

function editCopyright() {
  uni.showToast({ title: '编辑版权信息', icon: 'none' })
}
</script>

<style scoped lang="scss">
.admin-page {
  padding: 24px;
  background-color: #f5f7f9;
  min-height: 100vh;
}

.admin-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 24px;
}

.section-header {
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.table-container {
  width: 100%;
}

.table-header {
  display: flex;
  flex-direction: row;
  background-color: #e6f7ff;
  border-bottom: 1px solid #f0f0f0;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
}

.col {
  padding: 16px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

/* 各表格占位列宽 */
.col-title { flex: 1; }
.col-text { flex: 1; }
.col-image { flex: 1; }
.col-env { flex: 1; }
.col-req { flex: 1; }
.col-status { flex: 1; }
.col-action { width: 150px; justify-content: flex-end; }

.action-btn {
  color: #1890ff;
  cursor: pointer;
}

.mt-24 {
  margin-top: 24px;
}
</style>