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

        <!-- page content -->
        <div class="site-sem-wrap min-flex-right">
            <div class="siteMessage flex-common" id="siteMessage11">
                <h3>搜索引擎优化（SEO） <span>通过SEO设置，可以免费获得流量、提高网站在搜索引擎中的排名</span></h3>
                <el-form ref="formRef">
                    <div class="flex-wrap">
                        <div class="flex-left">
                            <GuipFormItem column="column" class="mb24" label="站点标题（T：title）">
                                <GuipInput slot="formDom" ref="GuipInput" class=" mb24" width="100%"
                                    v-model="siteInfo.sitename" placeholder="建议80字内">
                                </GuipInput>

                            </GuipFormItem>
                            <GuipFormItem column="column" label="站点关键词（K：keyword）">
                                <GuipInput slot="formDom" ref="GuipInput" width="100%" height="68px" type="textarea"
                                    v-model="siteInfo.sitekeywords">
                                </GuipInput>
                            </GuipFormItem>
                        </div>
                        <div class="flex-line "></div>
                        <div class="flex-right">
                            <GuipFormItem column="column" label="站点描述（D：description）">
                                <GuipInput slot="formDom" ref="GuipInput" width="100%" height="160px" type="textarea"
                                    v-model="siteInfo.sitedesc">
                                </GuipInput>
                            </GuipFormItem>
                        </div>
                    </div>
                </el-form>
                <GroupFormBtns @cancel="cancleUpdateSiteInfo" @confirm="updateSiteTDK" />
            </div>
            <div class="siteMessage flex-common mt12" id="siteMessage12">
                <h3>搜索引擎竞价（SEM） <span>通过SEM设置，获得流量、提高网站在搜索引擎中的排名</span></h3>
                <el-form ref="baiduRef" class="bidform baidu-form">
                    <div class="semBidWrap">
                        <h3 class="flex-between">
                            <p>百度OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
                            <!-- <div class="flex close-bid point" @click="deleteBid('baidu')">删除<img src="@/assets/register/close.svg" alt=""></div> -->
                        </h3>
                        <div class="baidu-wrap bidWrap">
                            <div class="bidwrap-item">
                                <div class="bidwrap-item-top mb24 flex">
                                    <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
                                    <div class="top-right column">
                                        <b>输入Token</b>
                                        <p>百度创建转化追踪：转化类型选择“服务购买成功”，接入方式选择“线索API”，复制token，填入下方输入框。
                                            <!-- <img src="@/assets/site/form_qua_ic.svg" alt=""> 指南  -->
                                        </p>
                                    </div>
                                </div>
                                <div class="bidwrap-item-bot flex">
                                    <div style="flex: 1;margin-right: 10px;">
                                        <GuipInput ref="GuipInput" width="100%" v-model="siteInfo.bd_ocpc_token"
                                            placeholder="请输入Token" />
                                    </div>
                                    <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                        @click="saveBaiduOcpcToken()">确认</GuipButton>
                                </div>
                            </div>
                            <div class="bidwrap-item">
                                <div class="bidwrap-item-top mb24 flex">
                                    <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
                                    <div class="top-right column">
                                        <b>联调创建OCPC</b>
                                        <p>创建转化追踪后：点击该条记录的“联调”，复制带有bd-vid的推广url，复制到下方输入框，点击按钮开始联调。
                                            <!-- <img src="@/assets/site/form_qua_ic.svg" alt=""> 指南  -->
                                        </p>
                                    </div>
                                </div>
                                <div class="bidwrap-item-bot flex">
                                    <div style="flex: 1;margin-right: 10px;">
                                        <GuipInput ref="GuipInput" width="100%" v-model="bdurl" placeholder="请输入联调链接" />
                                    </div>
                                    <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                        @click="verifyBaiduOcpc()">开始联调
                                    </GuipButton>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
                <el-form class="bidform" ref="360Ref">
                    <div class="semBidWrap">
                        <h3 class="flex-between">
                            <p>360OCPC竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
                            <!-- <div class="flex close-bid point" @click="deleteBid('360')">删除<img src="@/assets/register/close.svg" alt=""></div> -->
                        </h3>
                        <div class="baidu-wrap bidWrap">
                            <div class="beforeNotice">
                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                                <p class="mt12 flex">
                                    1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
                                        class="flex" target="_blank">
                                        <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
                                </p>
                                <p class="mt10 flex">
                                    2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
                                        <img src="@/assets/site/form_linkActive.svg"
                                            alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
                                </p>
                            </div>
                            <div class="bidwrap-item">
                                <div class="column">
                                    <p class="common_title">AppKey 和 AppSecret </p>
                                    <p class="common_text mt10 mb24" style="text-align: left;">
                                        点击前期准备事项第2步页面中的【投放说明】按钮，选择【API回传】，点击【获取Key&Secret】，将 AppKey 和 AppSecret 填入表中保存即可
                                    </p>
                                </div>
                                <div class="biditem360 mb24 flex">
                                    <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
                                    <b>AppKey</b>
                                    <div style="flex: 1;margin-right: 10px;">
                                        <GuipInput ref="GuipInput" width="100%" v-model="siteInfo.ocpc_360_appkey"
                                            placeholder="请输入appkey" />
                                    </div>
                                    <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                        @click="save360Ocpc()">确认</GuipButton>
                                </div>
                                <div class="biditem360 mb24 flex">
                                    <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
                                    <b>AppSecret</b>
                                    <div style="flex: 1;margin-right: 10px;">
                                        <GuipInput ref="GuipInput" width="100%" v-model="siteInfo.ocpc_360_appsecret"
                                            placeholder="请输入appsecret" />
                                    </div>
                                    <GuipButton type="primary" :btnstyle="{ width: '94px', height: '38px' }"
                                        @click="save360Ocpc()">确认</GuipButton>
                                </div>

                            </div>
                        </div>
                    </div>
                </el-form>
                <el-form ref="formRef" class="bidform tcpr-wrap">
                    <div class="semBidWrap">
                        <h3 class="flex-between">
                            <p>必应TCPA竞价 <span>自动化的出价和优化，以实现更高的广告投放效果和ROI</span></p>
                            <!-- <div class="flex close-bid point" @click="deleteBid('360')">删除<img src="@/assets/register/close.svg" alt=""></div> -->
                        </h3>
                        <div class="baidu-wrap bidWrap">
                            <div class="beforeNotice">
                                <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
                                <p class="mt12 flex">
                                    <i>1.</i> <a href="https://azure.microsoft.com/zh-cn/free" class="flex"
                                        target="_blank"> <img src="@/assets/site/form_linkActive.svg"
                                            alt="">前往微软云</a>（Azure），登录后填写个人资料并完成注册。
                                </p>
                                <p class="mt10 flex">
                                    <i>2.</i> <a href="https://aka.ms/bingads-app" class="flex" target="_blank"> <img
                                            src="@/assets/site/form_linkActive.svg"
                                            alt="">前往应用注册</a>，侧边栏点击“应用注册”，然后在右侧应用列表中注册应用程序
                                </p>
                                <div>
                                    <p>名称：填写应用名称</p>
                                    <p>受支持的帐户类型：选择 任何组织目录(任何 Microsoft Entra ID 租户 - 多租户)中的帐户和个人 Microsoft 帐户(例如
                                        Skype、Xbox)</p>
                                    <p>重定向URI：忽略</p>
                                    <p>点击：注册</p>
                                </div>
                                <p class="mt10"><i>3.</i>
                                    <span>应用配置，返回应用列表，在应用列表点击刚创建的应用，然后在应用概览页点击“添加重定向URI”->点击添加平台，选择移动和桌面应用程序->自定义重定向
                                        URI，
                                        <b>https://www.kuailelunwen.com/callback/microsoft_callback <img class="point"
                                                src="@/assets/site/form_copy.svg" alt=""></b></span>

                                </p>
                            </div>
                            <div class="bidwrap-item">
                                <div class="biditemMast mb12 flex-between">
                                    <div class="bidwrap-item-top flex">
                                        <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
                                        <div class="top-right column">
                                            <b>配置应用信息</b>
                                            <p>在微软云平台，获得应用程序(客户端) ID。并联系开户人员，获得开发者令牌Developer token </p>
                                        </div>
                                    </div>
                                    <div class="flex" v-if="siteInfo.bing_client_id&&siteInfo.bing_developer_token">
                                        <span :class="'yesSet'">已设置</span>
                                        <GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
                                            @click="manageDialog('configAppInfo')">管理设置</GuipButton>
                                    </div>
                                    <div class="flex" v-else>
                                        <span :class="'notSet'">未设置</span>
                                        <GuipButton type="normal" :btnstyle="{ width: '126px', height: '38px' }"
                                            @click="manageDialog('configAppInfo')">立即设置</GuipButton>
                                    </div>
                                </div>
                                <div class="biditemMast mb12 flex-between">
                                    <div class="bidwrap-item-top flex">
                                        <img class="bid-item-img" src="@/assets/site/step_2.png" alt="">
                                        <div class="top-right column">
                                            <b>配置离线转化信息</b>
                                            <p class="flex"><a href="https://ads.microsoft.com/" class="flex" target="_blank"> <img src="@/assets/site/form_linkActive.svg"
                                                        alt="">前往微软广告</a>，左上角切换有效的账户，从浏览器地址栏链接中获取aid的值和cid的值</p>
                                        </div>
                                    </div>
                                    <div class="flex" v-if="siteInfo.bing_customer_id&&siteInfo.bing_customer_account_id">
                                        <span :class="'yesSet'">已设置</span>
                                        <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
                                            @click="manageDialog('configOffline')">管理设置</GuipButton>
                                    </div>
                                    <div class="flex" v-else>
                                        <span :class="'notSet'">未设置</span>
                                        <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
                                            @click="manageDialog('configOffline')">立即设置</GuipButton>
                                    </div>
                                </div>
                                <div class="biditemMast mb12 flex-between">
                                    <div class="bidwrap-item-top flex">
                                        <img class="bid-item-img" src="@/assets/site/step_3.png" alt="">
                                        <div class="top-right column">
                                            <b>创建离线转化</b>
                                            <p>在微软云平台创建离线转化，创建成功后2个小时才生效，转化数据查看最晚有5-6小时延迟。 </p>
                                        </div>
                                    </div>
                                    <div class="flex" v-if="siteInfo.bing_conversion_name">
                                        <span :class="'yesSet'">已设置</span>
                                        <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
                                            @click="manageDialog('createOffline')">立即设置</GuipButton>
                                    </div>
                                    <div class="flex" v-else>
                                        <span :class="'notSet'">未设置</span>
                                        <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }"
                                            @click="manageDialog('createOffline')">立即设置</GuipButton>
                                    </div>
                                </div>
                                <div class="biditemMast flex-between" v-if="!siteInfo.bing_isexist_accesstoken">
                                    <div class="bidwrap-item-top flex">
                                        <img class="bid-item-img" src="@/assets/site/step_4.png" alt="">
                                        <div class="top-right column" v-if="siteInfo.bing_authurl">
                                            <b>登陆</b>
                                            <p>确认前3步完成，点击右侧“登录”按钮。 </p>
                                        </div>
                                        <div class="top-right column" v-else>
                                            <b>请先完善上方信息</b>
                                            <p>确认前3步完成。 </p>
                                        </div>
                                    </div>
                                    <div class="flex" v-if="siteInfo.bing_authurl">
                                        <GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" @click="openLink(siteInfo.bing_authurl)">登录</GuipButton>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="siteMessage flex-common mt12" id="siteMessage13">
                <h3>访问统计 <span>输入统计代码，便于统计浏览点击量(可以不填)</span></h3>
                <el-form ref="formRef">
                    <GuipInput ref="GuipInput" width="100%" height="160px" type="textarea" v-model="siteInfo.access_stats_code">
                    </GuipInput>
                </el-form>
                <GroupFormBtns @cancel="cancleUpdateSiteInfo" @confirm="saveSiteAccessStat" />
            </div>
            
            <GuipDialog type="normal" :dialogVisible="dialogVisibleConfig" :title="diaTitle" :show-close-button="false"
                :show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="handleConfirmConfig"
                @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
                <ConfigOffLineConversion v-if="configType == 'configOffline'" :siteInfo="siteInfo" @update-field="handleFieldUpdate"  />
                <ConfigAppInformation v-if="configType == 'configAppInfo'" :siteInfo="siteInfo" @update-field="handleFieldUpdate" />
                <CreateOffLine v-if="configType == 'createOffline'" :siteInfo="siteInfo" @update-field="handleFieldUpdate"  />
            </GuipDialog>
        </div>
    </div>
</template>
<script>
import GuipInput from '@/components/GuipInput.vue';
import { mapState } from 'vuex';
import store from '@/store';
// import GuipButton from '@/components/GuipButton.vue';
import GroupFormBtns from '@/components/GroupFormBtns.vue';
import GuipFormItem from '@/components/GuipFormItem.vue';
import GuipDialog from '@/components/GuipDialog.vue';
import GuipButton from '@/components/GuipButton.vue';
import ConfigOffLineConversion from '@/components/site/ConfigOffLineConversion.vue';
import ConfigAppInformation from '@/components/site/ConfigAppInformation.vue';
import CreateOffLine from '@/components/site/CreateOffLine.vue';

export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        CreateOffLine,
        ConfigAppInformation,
        ConfigOffLineConversion,
        GuipInput,
        GuipFormItem,
        GuipButton,
        GroupFormBtns,
        GuipDialog
    },
    data() {
        return {
            // AUTH
            token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
            // 站点信息
            siteInfo: {
                sitename: '',
                sitedesc: '',
                sitekeywords: '',
                bd_ocpc_token: '',
                ocpc_360_appkey: '',
                ocpc_360_appsecret: '',
                bing_client_id: '9999',
                bing_conversion_name: '',
                bing_customer_account_id: '',
                bing_customer_id: '',
                bing_developer_token: '',
                bing_isexist_accesstoken: false,
                bing_authurl: '',
            },
            bdurl: '',

            configType: '',
            diaTitle: '配置应用信息',
            configTitle: {
                createOffline: '创建离线转化',
                configOffline: '配置离线转化信息',
                configAppInfo: '配置应用信息',
            },
            dialogVisibleBid: false,
            dialogVisibleConfig: false,
        }
    },
    computed: {
        ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中
    },
    created(){
        store.commit('SET_CUSTOMIZE', true); 
        store.commit('SET_SLIDER_MENU','siteSettingData'); 
    },
    mounted() {
        this.getSiteInfo();
        store.commit('SET_PAGETITLE', '营销推广');
    },
    methods: {
        // 修改siteinfo
        handleFieldUpdate({ field, value }) {
            this.siteInfo = {
                ...this.siteInfo,
                [field]: value
            }
        },
        // 获取站点信息
        getSiteInfo() {
            const that = this
            that.siteInfo = []
            this.$http('POST', '/agentnew/ajax_get_site_info', {
                uid: this.$route.query.uid,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    that.siteInfo = {...response.data}
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        updateSiteTDK() {
            this.$http('POST', '/agentnew/ajax_update_site_tdk', {
                uid: this.$route.query.uid,
                title: this.siteInfo.sitename,
                desc: this.siteInfo.sitedesc,
                keyword: this.siteInfo.sitekeywords
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        saveBaiduOcpcToken() {
            this.$http('POST', '/agentnew/ajax_update_bd_ocpc', {
                uid: this.$route.query.uid,
                token: this.siteInfo.bd_ocpc_token,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        verifyBaiduOcpc() {
            this.$http('POST', '/agentnew/ajax_verify_bd_ocpc', {
                uid: this.$route.query.uid,
                bdurl: this.bdurl,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        save360Ocpc() {
            this.$http('POST', '/agentnew/ajax_save_360_ocpc', {
                uid: this.$route.query.uid,
                appkey: this.siteInfo.ocpc_360_appkey,
                appsecret: this.siteInfo.ocpc_360_appsecret
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        saveBingTcpc() {
            this.$http('POST', '/agentnew/ajax_save_bing_tcpa', {
                uid: this.$route.query.uid,
                client_id: this.siteInfo.bing_client_id,
                developer_token: this.siteInfo.bing_developer_token,
                customer_id: this.siteInfo.bing_customer_id,
                customer_account_id: this.siteInfo.bing_customer_account_id,
                conversion_name: this.siteInfo.bing_conversion_name
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        saveSiteAccessStat() {
            this.$http('POST', '/agentnew/ajax_update_site_access_stat', {
                uid: this.$route.query.uid,
                access_stats_code: this.siteInfo.access_stats_code,
            }, {
                headers: {
                    'Auth': this.token
                }
            }).then(response => {
                this.$nextTick(() => {
                    if (response.status) {
                        this.$Message.success(response.info);
                    } else {
                        this.$Message.error(response.info);
                    }
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        openLink(url) {
            window.open(url, '_blank');
        },
        cancleUpdateSiteInfo() {
            this.getSiteInfo();
        },
        // 确认按钮事件
        handleConfirm() {
            this.dialogVisibleBid = false;
        },
        // 取消按钮事件
        handleCancel() {
            this.$message.warning('点击了取消按钮');
            this.dialogVisibleBid = false;
        },
        manageDialog(type) {
            this.configType = type;
            this.dialogVisibleConfig = true;
            this.diaTitle = this.configTitle[type]
        },
        // 确认按钮事件
        handleConfirmConfig() {
            this.saveBingTcpc();
            this.dialogVisibleConfig = false;
            
        },
        // 取消按钮事件
        handleCancelConfig() {
            this.dialogVisibleConfig = false;
        },
        dialogVisibleChange(data) {
            console.log(data, 'data098908090');
        },
    }
}

</script>
<style scoped lang="scss">
.pageheader {
    display: flex;
    justify-content: space-between;
    /* 关键属性 */
    align-items: center;
    margin: 0px 0px 16px 0px;
}

.pagetitle {
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.08em;
    color: #1E2226;
    margin-top: 8px;
}

.site-sem-wrap {
    width: 100%;
    letter-spacing: 0.08em;
}

.notSet,
.yesSet {
    margin-right: 12px;
    color: #FF4D4F;
}

.yesSet {
    color: #00C261;
}

.bidform {
    &:nth-child(even) {
        margin: 32px 0;
    }
}

.baidu-form {
    .bidwrap-item {
        margin-bottom: 18px;
    }
}

.beforeNotice {

    h4 {
        margin: 0;
        gap: 8px;
    }

    margin-bottom: 18px;
    text-align: left;
    box-sizing: border-box;
    padding: 20px 14px;
    border-radius: 4px;
    /* middle/middle_blue_1 */
    background: #F2F7FF;
    /* middle/middle_blue_3 */
    border: 1px solid #BFDAFF;

    div {
        margin-top: 2px;
        padding-left: 23px;

        p {
            color: #8A9099;
        }

    }

    p {
        color: #1E2226;

        i {
            font-style: normal;
        }

        &:last-child {
            display: flex;
            align-items: stretch;

            b {
                font-weight: normal;
                color: #8A9099;
                display: inline-flex;

                img {
                    margin-left: 4px;
                }
            }
        }
    }

    a {
        text-decoration: none;
        color: #006AFF;
        margin-right: 10px;

        img {
            margin-left: 12px;
            margin-right: 12px;
        }
    }
}

.biditem360 {
    b {
        display: inline-block;
        width: 80px;
        text-align: left;
        margin-right: 10px;
    }
}

.addStore {
    margin-top: 24px;
    // transition: all .3s;
    // &:active{
    //     opacity: 0.7;
    // }
    // div{
    //     width: 16px;
    //     height: 16px;
    //     background-image: url(../assets/addIcon.svg);
    //     margin-right: 12px;
    // }
    // &:hover{
    //     div{
    //         background-image: url(../assets/addIcon_light.svg);
    //     }
    //     border-color: #006AFF;
    //     color: #006AFF;
    // }
}

.radio-wrap {}

.tcpr-wrap {
    .bidwrap-item {
        padding: 0 !important;
        background: transparent !important;

        .biditemMast {
            background: #fff;
            padding: 24px 16px;
        }
    }

    .semBidWrap {
        padding-bottom: 24rpx;
    }
}

.semBidWrap {
    background: #FAFAFA;
    padding: 18px 14px;
    box-sizing: border-box;

    .el-form-item {
        margin-bottom: 0;
    }

    .close-bid {
        color: #626573;
        font-size: 14px;
        font-weight: normal;
        transition: all .3s;

        &:hover {
            opacity: 0.7;
        }

        img {
            width: 16px;
            height: 16px;
            margin-left: 6px;
        }
    }


    .bidWrap {
        .bidwrap-item {
            padding: 24px 16px;
            box-sizing: border-box;
            border-radius: 8px;
            background: #FFFFFF;


            .bid-item-img {
                width: 32px;
                height: 32px;
                margin-right: 22px;
            }

            .bidwrap-item-top {
                .top-right {
                    p {
                        margin-top: 10px;
                    }

                    a {
                        text-decoration: none;
                        color: #006AFF;

                        img {
                            margin-right: 10px;
                        }
                    }
                }
            }

            .bidwrap-item-bot {
                padding-left: 54px;
                justify-content: flex-end;

            }

        }
    }

}
</style>