kuailelunwen_new_houtai/src/components/site/serviceSetting/showSet.vue

<template>
    <div class="main-content12">
        <div class="pageheader">
            <span class="pagetitle">基本设置</span>
        </div>

        <div class="flex-common">
            <h3 class="mb16">基础信息</h3>

            <PromptText text='温馨提示：服务别名、首页服务广告词和首页服务描述不允许使用"知网"、"pmlc"、"amlc"和"smlc"等关键词。' :type="2" class="mb32"/>

            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <GuipFormItem column="column" label="服务别名">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                       placeholder="建议80字内" desc="展示在用户端的服务名称">
                            </GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" label="服务广告词">
                            <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                       placeholder="建议20字内" desc="用来简短概括的解释服务">
                            </GuipInput>
                        </GuipFormItem>
                        <GuipFormItem column="column" label="服务描述">
                            <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
                                       desc="用来详细的解释服务">
                            </GuipInput>
                        </GuipFormItem>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <GuipFormItem column="column" label="服务Logo">
                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
                                          :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
                                          hover-text-color="#006AFF"/>
                        </GuipFormItem>
                        <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="flex-common">
            <h3>展示开关</h3>
            <el-form ref="formRef">
                <div class="flex-wrap">
                    <div class="flex-left">
                        <div class="card-item">
                            <div class="card-info">
                                <p class="card-name">首页服务显示</p>
                                <p class="card-desc">控制首页是否显示本服务</p>
                            </div>
                            <el-form>
                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
                                </GuipSwitch>
                            </el-form>
                        </div>
                        <div class="card-item">
                            <div class="card-info">
                                <p class="card-name">检测页价格展示</p>
                                <p class="card-desc">本服务检测页面是否展示价格</p>
                            </div>
                            <el-form>
                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
                                </GuipSwitch>
                            </el-form>
                        </div>
                    </div>
                    <div class="flex-line "></div>
                    <div class="flex-right">
                        <div class="card-item">
                            <div class="card-info">
                                <p class="card-name">首页推荐位</p>
                                <p class="card-desc">开启即上推荐位</p>
                            </div>
                            <el-form>
                                <GuipSwitch active-value="1" inactive-value="0" activeText="开启" inactiveText="关闭">
                                </GuipSwitch>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="save-button">
            <GuipButton type="primary" :btnstyle="saveBtnStyleObj">保存</GuipButton>
        </div>
    </div>
</template>
<script>

import HoverButton from "@/components/HoverButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import GuipSwitch from "@/components/GuipSwitch.vue";
import PromptText from "@/components/PromptText.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipButton from "@/components/GuipButton.vue";

export default {
  name: '',
  props:[],
  components: {
      GuipButton,
      GuipInput, PromptText, GuipSwitch, GuipFormItem, HoverButton

  },
  data(){
    return {

    }
  },
  methods:{

  }
}
</script>
<style lang="scss">
.flex-right{
  text-align: left;
}
.card-item{
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAFA;
  border-radius: 4px;
  border: none;
  margin-bottom: 12px;
  .card-info{
    text-align: left;
    margin-left: 12px;
    font-variation-settings: "opsz" auto;
    letter-spacing: 0.08em;
    .card-name{
      font-size: 14px;
      line-height: 18px;
      color: #1E2226;
    }
    .card-desc{
      font-size: 12px;
      line-height: 13px;
      margin-top: 12px;
      color: #8A9099;
    }
  }

  .el-form-item{
    margin: 0;
  }
}
</style>