sl-sfy-safety/src/views/message/sysnotion-config/compontents/RightCard.vue

<!--
 * @since: 2024-12-30
 * RightCard.vue
-->
<template>
   <div class="right">
        <div class="top-head">
          实时效果
          <el-tooltip
            effect="dark"
            content="实例样式仅供参考，最终展示以线上为准"
            placement="top-start"
          >
            <img src="@/assets/icons/info.png" />
          </el-tooltip>
        </div>
        <div class="tabs">
          <el-tabs v-model="activeName">
            <el-tab-pane label="平台侧" name="platform" class="platform">
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>卡片页:</span>
                </div>
                <div class="card">
                  <div class="card-title"
                    >系统公告<a>去查看<img src="@/assets/icons/arrow.png" /></a
                  ></div>
                  <div class="card-content">
                    <p style="font-size: 12px; color: #969799">2024年6月25日 16:45:06</p>
                    <p style="margin-top: 5px; font-size: 13px; color: #646566">
                      {{ ruleForm.title || title }}
                    </p>
                  </div>
                </div>
              </div>
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>详情页:</span>
                </div>
                <div class="info">
                  <div class="info-title"> {{ ruleForm.title || title }} </div>
                  <div class="info-content">
                    <span>{{ ruleForm.introductio || content }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="蓝信侧" name="lanxin" class="lanxin">
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>卡片页:</span>
                </div>
                <div class="card">
                  <div class="card-title">系统公告</div>
                  <div class="card-content">
                    <p style="margin-top: 5px; font-size: 13px; color: #646566">
                      {{ ruleForm.title || title }}
                    </p>
                  </div>
                  <img src="@/assets/icons/link_icon.png" />
                </div>
              </div>
              <div class="tabs-content">
                <div class="title">
                  <div class="vertical"></div>
                  <span>详情页:</span>
                </div>
                <div class="info">
                  <div class="info-title"> {{ ruleForm.title || title }} </div>
                  <div class="info-content">
                    <span>{{ ruleForm.introductio || content }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { RuleFormProps } from '../type';
import { title, content } from '../../constant';

const activeName = ref('platform');
interface Props {
  ruleForm: RuleFormProps
}
defineProps<Props>()
</script>

<style scoped lang="scss">
.right {
        width: 380px;
        height: 100%;
        padding: 20px 9px 0 20px;
        .top-head {
          display: flex;
          gap: 7px;
          align-items: center;
          width: 100%;
          height: 22px;
          font-weight: 600;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          img {
            cursor: pointer;
          }
        }
        .tabs {
          margin-top: 14px;
          overflow-y: auto;
          :deep(.el-tabs__header) {
            margin: 0 0 22px;
          }
          :deep(.is-top) {
            font-weight: 550;
            font-size: 14px;
            line-height: 22px;
          }
          :deep(.el-tabs__nav-wrap::after) {
            height: 0px;
          }
          .platform {
            display: flex;
            flex-direction: column;
            gap: 24px;
            .tabs-content {
              width: 100%;
              height: auto;
              max-height: calc(100vh - 450px);
              .title {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                gap: 18px;
                width: 100%;
                height: 31px;
                .vertical {
                  width: 4px;
                  height: 12px;
                  background: #1777ff;
                  border-radius: 3px;
                }
                span {
                  font-weight: 400;
                  font-size: 14px;
                  color: #303133;
                  line-height: 20px;
                }
              }
              .card {
                width: 100%;
                height: 124px;
                padding: 10px 14px 0 12px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                .card-title {
                  display: flex;
                  justify-content: space-between;
                  font-weight: 600;
                  font-size: 15px;
                  color: #646566;
                  line-height: 20px;
                  a {
                    font-size: 14px;
                    display: flex;
                    gap: 8px;
                    cursor: default;
                  }
                }
                .card-content {
                  margin-top: 15px;
                  font-weight: 400;
                  line-height: 20px;
                }
              }
              .info {
                width: 100%;
                max-height: calc(100vh - 450px - 32px);
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                .info-title {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 100%;
                  height: 41px;
                  font-weight: 600;
                  font-size: 14px;
                  color: rgba(0, 0, 0, 0.85);
                  line-height: 22px;
                  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                }
                .info-content {
                  width: 100%;
                  max-height: calc(100vh - 450px - 32px - 55px);
                  overflow-y: auto;
                  padding: 12px 7px 12px 12px;
                  font-weight: 400;
                  font-size: 14px;
                  color: #646566;
                  line-height: 22px;
                  word-wrap: break-word;
                  white-space: pre-wrap;
                }
              }
            }
          }
          .lanxin {
            display: flex;
            flex-direction: column;
            gap: 24px;
            .tabs-content {
              width: 100%;
              height: auto;
              max-height: calc(100vh - 400px);
              .title {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
                gap: 18px;
                width: 100%;
                height: 31px;
                .vertical {
                  width: 4px;
                  height: 12px;
                  background: #1777ff;
                  border-radius: 3px;
                }
                span {
                  font-weight: 400;
                  font-size: 14px;
                  color: #303133;
                  line-height: 20px;
                }
              }
              .card {
                width: 100%;
                height: 79px;
                padding: 10px 14px 0 12px;
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                position: relative;
                .card-title {
                  display: flex;
                  justify-content: space-between;
                  font-weight: 600;
                  font-size: 15px;
                  color: #646566;
                  line-height: 20px;
                  a {
                    display: flex;
                    gap: 8px;
                  }
                }
                .card-content {
                  margin-top: 15px;
                  font-weight: 400;
                  line-height: 20px;
                }
                img {
                  position: absolute;
                  top: 10px;
                  right: 17px;
                }
              }
              .info {
                width: 100%;
                max-height: calc(100vh - 400px - 50px);
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid rgba(0, 0, 0, 0.06);
                .info-title {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 100%;
                  height: 41px;
                  font-weight: 600;
                  font-size: 14px;
                  color: rgba(0, 0, 0, 0.85);
                  line-height: 22px;
                  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
                }
                .info-content {
                  width: 100%;
                  max-height: calc(100vh - 400px - 32px - 41px);
                  overflow-y: auto;
                  padding: 12px 7px 12px 12px;
                  font-weight: 400;
                  font-size: 14px;
                  color: #646566;
                  line-height: 22px;
                  word-wrap: break-word;
                  white-space: pre-wrap;
                }
              }
            }
          }
        }
      }
</style>