technique_web3/src/views/help/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <div class="w_1200">
          <el-row class="help">
            <el-col :span="6" class="left">
              <a-menu
                v-model:selectedKeys="selectedKeys"
                style="width: 256px"
                mode="inline"
                :items="menuList"
                @select="onOpenChange"
              ></a-menu>
            </el-col>
            <el-col v-if="select === '1'" :span="18" class="right">
              <h2>关于我们</h2>
              <el-col :span="24" class="other">
                <div v-html="configInfo.brief"></div>
              </el-col>
            </el-col>
            <!-- <el-col v-else-if="select === '2'" :span="18" class="right">意见反馈</el-col> -->
            <el-col v-else-if="select === '3'" :span="18" class="right">
              <el-row :gutter="20">
                <el-col :span="12" class="left">
                  <el-image class="image" :src="map" fit="fill" />
                </el-col>
                <el-col :span="12" class="right">
                  <el-col :span="24" class="other">
                    <el-icon color="#2374ff">
                      <Message />
                    </el-icon>
                    <span>联系我们</span> {{ configInfo.footInfo.Company }}
                  </el-col>
                  <el-col :span="24" class="other">
                    <el-icon color="#2374ff">
                      <Location />
                    </el-icon>
                    <span>联系地址</span> {{ configInfo.footInfo.Address }}
                  </el-col>
                  <el-col :span="24" class="other">
                    <el-icon color="#2374ff">
                      <Iphone />
                    </el-icon>
                    <span>联系电话</span> {{ configInfo.footInfo.Phone }}
                  </el-col>
                </el-col>
              </el-row>
            </el-col>
            <!-- <el-col v-else-if="select === '4'" :span="18" class="right">法律条款</el-col> -->
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const $checkRes = inject('$checkRes')
// 接口
import { DesignStore } from '@/store/api/platform/design'
const designStore = DesignStore()
// 图片引入
import map from '/images/map.png'
const route = useRoute()
// 加载中
const loading = ref(false)
const selectedKeys = ref(['1'])
const select = ref('1')
const menuList = reactive([
  {
    key: '1',
    label: '关于我们',
    title: '关于我们'
  },
  // {
  //   key: '2',
  //   label: '意见反馈',
  //   title: '意见反馈'
  // },
  {
    key: '3',
    label: '联系我们',
    title: '联系我们'
  }
  // {
  //   key: '4',
  //   label: '法律条款',
  //   title: '法律条款'
  // }
])
const configInfo = ref({ footInfo: {} })
// 请求
onMounted(async () => {
  loading.value = true
  search()
  loading.value = false
})
const search = async () => {
  if (route.query.type) {
    select.value = route.query.type
    selectedKeys.value = [route.query.type]
  }
  // 基础设置
  const result = await designStore.query({})
  if ($checkRes(result)) configInfo.value = result.data[0] || {}
}
const onOpenChange = (item) => {
  select.value = item.key
}
</script>
<style scoped lang="scss">
.main {
  .help {
    padding: 10px 0;
    min-height: 650px;

    .left {
      display: flex;
      align-items: normal;
    }

    .right {
      background: rgba(40, 77, 191, 0.03);
      padding: 20px;

      h2 {
        font-size: 32px;
        color: #284dbf;
      }

      .other {
        margin-bottom: 10px;
        font-family: PingFangSC-Regular;
        font-size: $global-font-size-16;
        color: #7e8288;
        line-height: 25px;

        span {
          font-family: PingFangSC-Regular;
          font-size: $global-font-size-16;
          color: #383b40;
          line-height: 25px;
          margin: 0 5px;
        }
      }
    }
  }
}
</style>