smartai2dian0/src/modules/intelligent/MessageBody.vue

<template>
  <div class="body-container">
    <CardItem v-for="item in moke_data" :key="item.id" :name="item.name" :img_src="item.img_src" :height="200">
      <template #description> {{ item.desc }}> </template>
      <template #settings>
        <a-switch v-model="item.online">
          <template #checked> 上线 </template>
          <template #unchecked> 下线 </template>
        </a-switch>
      </template>
      <template #labels v-if="item.has_label">
        <div class="label-btn">
          <icon-subscribe />
          <div>添加标签</div>
        </div>
      </template>
      <template #bottom>
        <div class="bottom">
          <div class="user"><icon-user /> 创建用户：{{ item.user }}</div>
          <div class="tools">
            <icon-more :style="{ fontSize: '20px' }" />
          </div>
        </div>
      </template>
    </CardItem>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CardItem from '../../views/manage-common/CardItem.vue';
import intelligentFrame1 from '../../assets/image/management/intelligent-frame1.png';
import intelligentFrame2 from '../../assets/image/management/intelligent-frame2.png';
import intelligentFrame3 from '../../assets/image/management/intelligent-frame3.png';
import intelligentFrame4 from '../../assets/image/management/intelligent-frame4.png';
import intelligentFrame5 from '../../assets/image/management/intelligent-frame5.png';
import intelligentFrame6 from '../../assets/image/management/intelligent-frame6.png';
import intelligentFrame7 from '../../assets/image/management/intelligent-frame7.png';
import intelligentFrame8 from '../../assets/image/management/intelligent-frame8.png';

const moke_data = ref([
  {
    id: 1,
    name: '智能问答',
    img_src: intelligentFrame1,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: false,
    has_label: false
  },
  {
    id: 2,
    name: '智能客服',
    img_src: intelligentFrame2,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: false,
    has_label: true
  },
  {
    id: 3,
    name: '继题组卷',
    img_src: intelligentFrame3,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: true,
    has_label: false
  },
  {
    id: 4,
    name: '小数绘图',
    img_src: intelligentFrame4,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: true,
    has_label: true
  },
  {
    id: 5,
    name: '材据分析',
    img_src: intelligentFrame5,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: true,
    has_label: false
  },
  {
    id: 6,
    name: '报告自动生成 ',
    img_src: intelligentFrame6,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: true,
    has_label: false
  },
  {
    id: 7,
    name: '文档创作',
    img_src: intelligentFrame7,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: false,
    has_label: true
  },
  {
    id: 8,
    name: '设备检测',
    img_src: intelligentFrame8,
    desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
    user: 'admin',
    online: true,
    has_label: true
  }
]);
</script>
<style scoped lang="css">
.body-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 20px;
  overflow: auto;
  height: calc(100% - 80px);
}
.label-btn {
  display: flex;
  gap: 10px;
  padding: 8px 16px;
  background-color: var(--color-neutral-3);
  font-size: 12px;
  cursor: pointer;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>