kuailelunwen_new_houtai/src/views/agent/customizeDoc.vue

<template>
    <div class="main-content12 agree-info">
        <div class="flex-common">
            <div class="w1000">
                <div class="agree-title mb20">自定义模板开发文档</div>
                <div class="flex-between mb20">
                    <div></div>
                    <div class="agree-date">更新日期：2025年08月06日</div>
                </div>
                <div class="agree-section">
                    <div class="tx">
                        <div class="flex">自定义首页模板，按下方要求书写自定义网站，并压缩上传后，可生成自定义首页<br>此模板完全由你设定</div>
                    </div>
                </div>
                <div class="agree-section">
                    <div class="ti">一、目录结构</div>
                    <div class="ti-sec">文件及目录按以下命名定义</div>
                    <div class="tx">
                        <div class="flex">
                            home.html首页模板<br>
                            ├─style样式目录，该目录下存放js、css、图片等<br>
                            ├─html页面目录，该目录下存放html页面，例如关于我们等
                        </div>
                    </div>
                </div>
                <div class="agree-section">
                    <div class="ti">二、页面规范</div>
                    <div class="ti-sec">首页及html目录下的html页面支持标签替换，支持标签：{$priv_conf}、{$priv_style}、{$priv_html}、{$access_stats_code}</div>
                    <div class="tx">
                        <div class="flex">
                            1. 标签使用说明（以万方2.0为例）：<br>
                            价格标签：{$priv_conf.price.wanfang2}<br>
                            单位标签：{$priv_conf.unit.wanfang2}<br>
                            检测链接标签：{$priv_conf.url.wanfang2}<br>
                            其他检测服务的价格、单位、检测链接，即从下表找到对应的服务标识替换wanfang2<br>
                        </div>
                    </div>
                    <div class="ti-sec">各检测服务标识如下</div>
                    <div class="flag-area">
                        <div class="flag-ti flex gap10">
                            <span class="flag-ti-copy" @click="copyAll">复制全部<img src="@/assets/site/form_copy_white.svg" alt=""></span>
                            <span>（格式）测服务标识/检测服务名称</span>
                        </div>
                        <div class="flag-info">
                            <div v-for="item in supply_list" :key="item.flag">
                                <GuipToolTip :content="item.flag + ' / ' + item.name">
                                    <span>{{item.flag}} / {{item.name}}</span>
                                </GuipToolTip>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import GuipToolTip from "@/components/GuipToolTip.vue";

export default {
    name: 'customizeDoc',
    components: {GuipToolTip},
    data() {
        return {
            supply_list: []
        }
    },
    mounted() {
        this.getSupplyList()
    },
    methods: {
        getSupplyList(){
            this.$http('POST', '/agentnew/ajax_get_supply_list', {}).then(response => {
                if(response.status){
                    this.$nextTick(function (){
                       this.supply_list = response.data
                    })
                    return true
                }
                this.$message.error(response.data.info)
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        copyAll(){
            let copyText = "";
            this.supply_list.forEach(function (item){
                copyText += item.flag + " / " + item.name + "\r\n";
            })

            this.$copy(copyText, {
                successMsg: '内容已复制到剪贴板',
                errorMsg: '复制失败，请按Ctrl+C手动复制',
                vm: this
            });
        }
    }
}
</script>
<style scoped lang="scss">
.mb20{
  margin-bottom: 20px;
}
.w1000{
  width: 1000px;
  margin: 0 auto;
}
.agree-info{
  letter-spacing: 0.08em;
  .agree-title{
    font-size: 26px;
    color: #1E2226;
  }
  .agree-date{
    color: #626573;
    font-size: 14px;
  }
  .agree-section{
    text-align: left;
    .ti{
      color: #1E2226;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 12px;
    }
    .ti-sec{
      color: #1E2226;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 12px;
    }
    .tx{
      font-size: 14px;
      color: #595961;
      margin-bottom: 20px;
      div{
        margin-bottom: 12px;
        line-height: 26px;
      }
    }
    .flag-area{
      font-size: 12px;
      background: #F2F3F5;
      color: #626573;
      .flag-ti{
        padding: 12px 24px;
        color: #1E2226;
        .flag-ti-copy{
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
          color: #FFFFFF;
          background: #626573;
          padding: 6px;
        }
      }

      .flag-info{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 5px 28px;
        line-height: 26px;
        gap: 20px;
        div{
          width: calc((100% - 60px) / 4);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>