xiangcunwang_web/pages/advertising/index.vue

<template>
    <!-- 广告服务 -->
    <div>
        <!-- 广告页面头部 -->
        <AdvertisingHead></AdvertisingHead>
        <div class="adtips">
            <div class="inner">
                <p v-if="activeName == '1'">注意：广告购买需提交信息，用户与商务人员进行线下金额交易，交易成功后由商务人员后台审核。审核通过，即广告投放成功。</p>
            </div>
        </div>
        <div class="advertising">
            <div class="inner">
                <el-tabs v-model="activeName" :tab-position="tabPosition" class="demo-tabs" @tab-change="goOrderList">
                    <!-- {{  ad }} -->
                    <el-tab-pane label="广告购买" name="1" @click="goBuyAd">
                        <!-- 广告购买 -->
                        <div id="buyAd">
                            <div class="buyAD">
                                <div class="inner">

                                    <!-- 填写广告信息内容 -->
                                    <div class="textOne" v-if="ad == 1">
                                        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120"
                                            class="demo-ruleForm" :size="formSize" status-icon>
                                            <el-form-item label="广告名称:" prop="adName">
                                                <el-input v-model="ruleForm.adName" placeholder="请输入广告名称" />
                                            </el-form-item>
                                            <el-form-item label="广告链接:" prop="adLink">
                                                <el-input v-model="ruleForm.adLink" placeholder="请输入广告链接" />
                                            </el-form-item>
                                            <el-form-item label="广告持续时间:" required>
                                                <el-config-provider :locale="zhCn">
                                                    <el-date-picker v-model="ruleForm.time" type="daterange"
                                                        range-separator="至" start-placeholder="请选择开始时间"
                                                        end-placeholder="请选择结束时间" :size="size" @change="changeStartTime"
                                                        :disabled-date="disabledStartTime" />
                                                </el-config-provider>
                                            </el-form-item>
                                            <el-form-item label="广告尺寸:" prop="adSize">
                                                <el-radio-group v-model="ruleForm.adSize">
                                                    <el-radio :value="item.id" v-for="item in options" :key="item.id"
                                                        @change="changeAdSize">{{
                                                            item.size }}</el-radio>
                                                </el-radio-group>
                                                <!-- <el-select v-model="ruleForm.adSize" placeholder="请选择广告尺寸" @change="changeAdSize">
                                                    <el-option v-for="item in options" :key="item.id" :label="item.size"
                                                        :value="item.id"></el-option>
                                                </el-select> -->
                                                <a class="pic" @click="goPhoto">查看示意图</a>
                                            </el-form-item>


                                            <!-- 表格部分 -->
                                            <div class="pageTable">
                                                <el-table :data="tableData" border ref="multipleTable" empty-text="暂无数据"
                                                    @selection-change="handleSelectionChange" style="width: 100%"
                                                    :header-row-style="{ height: '60px' }"
                                                    :row-style="{ height: '74px' }"
                                                    :header-cell-style="{ backgroundColor: '#fafafa', color: '#666' }">
                                                    <!-- <el-table-column type="selection" :reserve-selection="true"
                                                        width="152" align="center" /> -->
                                                    <el-table-column width="" align="center">
                                                        <template #default="{ row }">
                                                            <el-checkbox v-model="row.selected"
                                                                @change="toggleRowSelection(row)">
                                                            </el-checkbox>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="website_name" label="网站" width="220" />
                                                    <el-table-column prop="name" label="广告位名称" width="220" />
                                                    <el-table-column prop="size" label="广告尺寸" width="220" />
                                                    <el-table-column prop="price" label="金额 (元) / 天" width="220" />
                                                </el-table>
                                            </div>
                                            <el-form-item label="广告图:" prop="adImg">
                                                <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                                                    :on-success="handleAvatarSuccess"
                                                    :before-upload="beforeAvatarUpload">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                                    <div v-else>
                                                        <el-icon class="avatar-uploader-icon">
                                                            <Plus></Plus>
                                                            <div class="chooseImgDiv">选择图片</div>
                                                        </el-icon>
                                                    </div>
                                                </el-upload>
                                            </el-form-item>
                                        </el-form>


                                        <!-- 示意图弹框 -->
                                        <el-dialog v-model="dialogTableVisible" :show-close="false" width="60%"
                                            :close-on-click-modal="false">
                                            <template #header="{ close, titleId, titleClass }">
                                                <div class="my-header">
                                                    <h4 :id="titleId" :class="titleClass" class="left">示意图类型</h4>
                                                    <el-button type="danger" @click="close" class="right">
                                                        <el-icon class="el-icon--left">
                                                            <CircleCloseFilled />
                                                        </el-icon>
                                                        关闭
                                                    </el-button>
                                                </div>
                                            </template>
                                            <ul class="graph">
                                                <li>
                                                    <span>广告尺寸图A: 1200x90</span>
                                                    <img src="../../public/ad/01.png" alt="">
                                                </li>
                                                <li>
                                                    <span>广告尺寸图B: 600x150</span>
                                                    <img src="../../public/ad/02.png" alt="">
                                                </li>
                                                <li>
                                                    <span>广告尺寸图C: 300x150</span>
                                                    <img src="../../public//ad/03.png" alt="">
                                                </li>
                                            </ul>
                                        </el-dialog>
                                    </div>

                                    <!-- 提交工单信息 -->
                                    <div class="submit" v-if="ad == 2">
                                        <div class="inner">
                                            <h1>广告信息已提交成功，请等待审核......</h1>
                                            <p>
                                                工单编号:
                                                <span>{{ orderInformation }}</span>
                                            </p>
                                            <div class="btn">
                                                <button class="check" @click="lookOrder">查看工单</button>
                                                <button class="apply" @click="reapply">再次申请</button>
                                            </div>
                                            <span>如有疑问，可联系客服人员。</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="工单列表" name="2">
                        <!-- 工单列表 -->
                        <AdvertisingOrderList @childData="handleChildData"></AdvertisingOrderList>
                    </el-tab-pane>
                </el-tabs>

            </div>
            <div class="bottom" v-if="ad == 1 && activeName == '1'" :key="ad">
                <div class="inner">
                    <!-- 总金额 -->
                    <div class="amount" v-if="ad == 1">
                        总金额:
                        <span>{{ priceTotal == '' ? 0 : priceTotal }}</span>
                        元
                    </div>
                    <!-- 按钮 -->
                    <div class="btn">
                        <button class="btn2" @click="submitStep" v-if="ad == 1"> 提交工单</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告页面底部 -->
        <AdvertisingFoot></AdvertisingFoot>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from 'vue'
// import { ElCheckbox, ElRadio, ElRadioGroup, ElDatePicker, ElInput, ElUpload, ElPagination, ElIcon, ElSelect, ElOption, ElTabs, ElTabPane, ElTable, ElTableColumn, ElMessage, ElForm, ElFormItem, ElCol, valueEquals } from 'element-plus'
import { ElCheckbox, ElRadio, ElRadioGroup, ElDatePicker, ElInput, ElUpload, ElPagination, ElIcon, ElSelect, ElOption, ElTabs, ElTabPane, ElTable, ElTableColumn, ElMessage, ElForm, ElFormItem, ElCol, valueEquals, ElConfigProvider } from 'element-plus'
import { ElButton, ElDialog } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { Plus, DArrowRight, Edit, Picture, UploadFilled } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { getToken, setToken, removeToken } from '@/store/useCookieStore'


import { useRoute } from 'vue-router'

const route = useRoute()

// axios请求
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

// 通过变量ad控制tab栏标题的颜色及每一步下的不同的内容
let ad = useState("ad", () => 1)
let dialogTableVisible = useState("dialogTableVisible", () => false)//示意图弹框
let dialogTableVisible1 = useState("dialogTableVisible1", () => false)//示意图弹框

let activeName = useState("activeName", () => "1")
let startTime = useState("startTime", () => new Date())
let adSize = useState("adSize", () => "")
let tableData = useState("tableData", () => [])
let processedData = useState("processedData", () => [])
let pid = useState("pid", () => [])
let pids = useState("pids", () => [])
let pidArr = useState("pidArr", () => [])
let orderInformation = useState("orderInformation", () => "")
let adWeb = useState("adWeb", () => "")
let adWebId = useState("adWebId", () => "")
let adWebList = useState("adWebList", () => [])
let priceTotal = useState("priceTotal", () => '')//总金额
let orderId = useState("orderId", () => "")
let options = useState('options', () => [])
const multipleTable = ref('');
let shopCode = useState('shopCode', () => '')
let token = useState('token', () => '')
let showToken = useState("showToken", () => '')


watch(token, (newval, oldval) => {
    console.log(newval, oldval);
    showToken.value = newval
}, {
    deep: true,
    immediate: true,
})

// 定义响应式数据
const seoData = ref({
    title: '广告服务',
    description: '默认描述',
    keywords: '默认关键词',
    image: 'https://example.com/default-image.jpg'
});

// 在 onMounted 钩子中获取数据
onMounted(()=>{
    seoData.value.title = '广告服务';
    seoData.value.description = '默认描述';
    seoData.value.keywords = '默认关键词';
})

let goTopic = () => {
    navigateTo({
        path: "/topic"
    })
}
let goAD = () => {
    navigateTo({
        path: "/advertising"
    })
}
let goLogin = () => {
    token.value = getToken()
    // window.location.href = ("http://admindev.bjzxtw.org.cn/#/login?backurl=http%3a%2f%2fnwdev.bjzxtw.org.cn%2f")
    window.location.href = ("http://admindev.bjzxtw.org.cn/auth/login.php?backurl=http://nwdev.bjzxtw.org.cn")
    token.value = getToken()
}
let goReg = () => {
    dialogTableVisible1.value = true
}

let goUserInfo = () => {

}

// 分页
let total = useState('total', () => 0)
let pageSize = useState("pageSize", () => 20)
let page = useState("page", () => 1)


//ruleForm
let logoUrl = ref('');
const formSize = ref('default');
const ruleFormRef = ref();
const ruleForm = reactive({
    adName: '',
    adLink: '',
    time: '',
    startTime: '',
    endTime: '',
    adSize: 1,
    adImg: '',
});

const rules = reactive({
    adName: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
    adLink: [{ required: true, message: '请输入广告链接', trigger: 'change' }],
    startTime: [{ required: true, message: '请输入开始时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请输入结束时间', trigger: 'change' }],
    adSize: [{ required: true, message: '请选择广告尺寸', trigger: 'change' }],
    adImg: [{ required: true, message: '请选择广告图', trigger: 'change' }],
});

const tabPosition = ref('left')

// 获取开始时间
let changeStartTime = (val) => {
    console.log(val);
    ruleForm.startTime = `${val[0].getFullYear()}-${val[0].getMonth() + 1}-${val[0].getDate()}`
    ruleForm.endTime = `${val[1].getFullYear()}-${val[1].getMonth() + 1}-${val[1].getDate()}`
    console.log(ruleForm.startTime);
    console.log(ruleForm.endTime);

    getAdSize()
    //创建购物车
    axios.post("/order/addShoppingCart").then(response => {
        // console.log("创建购物车", response.data);
        shopCode.value = response.data
        console.log('shopCode', shopCode.value);
    })

}
//禁止选择的时间区域
let disabledStartTime = (time) => {
    return time.getTime() <= (Date.now() + 3600 * 1000 * 24);
}

const imageUrl = ref('');
const handleAvatarSuccess = (response, uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
};
const bb = (item) => {
    console.log("===", item)
    navigateTo({
        path: "/advertising/addetail",
        query: {
            id: item
        }
    })
}
//获取图片地址
const beforeAvatarUpload = (file) => {
    console.log('file', file);

    if (!file) return;
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG && !isPNG) {
        ElMessage.error('上传图片只能是 JPG 或 PNG 格式!');
        return;
    }
    if (!isLt2M) {
        ElMessage.error('上传图片大小不能超过 2MB!');
        return;
    }

    const data = new FormData();
    data.append('file', file);

    axios.post("/public/uploadFile", data).then(res => {
        console.log(res);
        logoUrl.value = res.data.imgUrl;
        ruleForm.adImg = res.data.imgUrl;
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '网络错误，请重试！'
        });
    });
};

let goPhoto = () => {
    dialogTableVisible.value = true
}

//选择的广告位
let handleSelectionChange = (selectedRows) => {

    pidArr.value = selectedRows.map(row => row.pid);
    console.log("选中的广告位llllllllll", pidArr.value);
    // getPrice() //获取总金额
    let aa = JSON.parse(JSON.stringify(pidArr.value))
    console.log("pids", aa);

    for (let item = 0; item <= aa.length - 1; item++) {
        console.log('pidArr.value', aa[item]);
        pids.value = aa[item]
    }
}

pidArr.value.forEach((item) => {
    const index = tableData.findIndex((row) => row.id === item);
    if (index !== -1) {
        tableData[index].selected = true;
    }
});

let toggleRowSelection = (row) => {
    console.log('11111', row.pid);
    console.log('类型', typeof (row.pid));

    // 判断 row.pid 是否已经存在于 pid.value 数组中
    const isExist = pid.value.includes(row.pid);
    console.log('判断当前选择的id是否已被选择', isExist); // 输出: true
    if (isExist) {
        //删除购物车中的广告位
        let data = {
            shopping_id: shopCode.value,
            pid: row.pid,
        }
        //删除购物车接口
        axios.post('/order/delShoppingCartAD', data).then(data => {
            console.log('删除购物车广告位--------------', data);
            if (data.code == 200) {
                getShoppingCartAD()
            }
        })
    } else {
        //添加购物车中的广告位
        let data = {
            shopping_id: shopCode.value,
            pid: row.pid,
        }
        //添加购物车接口
        axios.post('/order/addShoppingCartAD', data).then(data => {
            console.log('添加购物车广告位--------------', data);
            if (data.code == 200) {
                getShoppingCartAD()
            }
        })
    }

};

onMounted(() => {
    tableData.value.forEach((row) => {
        console.log(row);

        if (row.selected) {
            multipleTable.value.toggleRowSelection(row, true);
        }
    });
});


//获取广告尺寸列表
let adSizeList = () => {
    // 搜索按钮接口
    axios.post("/order/getAD").then(response => {
        console.log("response", response);
        options.value = response.data
        for (let item of options.value) {
            console.log(item);
            item.size = item.width + ' * ' + item.height + ' px '
            // ruleForm.adSize = item.id
        }
        console.log("=========", options.value);
    })
}

//查看工单
let lookOrder = () => {
    activeName.value = '2'
    sessionStorage.setItem('activeName', JSON.stringify('2'));
    // window.location.href = (`http://localhost:3000/advertising?activeName=${'2'}`)
    window.location.href = (`http://nwdev.bjzxtw.org.cn/advertising?activeName=${'2'}`)
}

//再次申请
let reapply = () => {
    ad.value = 1
    // window.location.href = ('http://localhost:3000/advertising')
    window.location.href = ('http://nwdev.bjzxtw.org.cn/advertising')
}

//获取总金额
const getPrice = () => {
    let data = {
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pid: pid.value
    }
    console.log('data=========', data);

    axios.post('/order/getPrice', data).then(data => {
        console.log('获取到的金额', data.data);
        priceTotal.value = data.data
    })
}


//获取购物车广告位 
const getShoppingCartAD = () => {
    axios.post('/order/getShoppingCartAD', {
        shopping_id: shopCode.value
    }).then(data => {
        console.log('获取购物车广告位=====================', data.data.pid);
        pid.value = data.data.pid
        getPrice()
    })
}


//挂载成功
onMounted(() => {
    adSizeList()
    getPrice()

    if (route.query.activeName == '1' || route.query.activeName == '2') {
        activeName.value = route.query.activeName;
    }
    if (!route.query.activeName) {
        activeName.value = JSON.parse(sessionStorage.getItem('activeName'));
        // console.log('activeName', activeName.value);
    }
})
onMounted(() => {
    // ad.value=route.query.ad

    watch(activeName, (newval) => {
        console.log('activeName', newval);
        sessionStorage.setItem('activeName', JSON.stringify(newval));
    }, {
        deep: true,
        immediate: true
    })
})


//6.子组件传递的数据 start ---------------------------------------->
let handleChildData = (data) => {
    activeName.value = `${data}`
}
//6.子组件传递的数据 end ---------------------------------------->



//广告尺寸发生变化的时候
let changeAdSize = (val) => {
    console.log('val', val);
    ruleForm.adSize = val
    getAdSize()
}

//获取广告尺寸
let getAdSize = () => {
    // 获取广告位需要传递的参数
    let adData = {
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pageSize: pageSize.value,
        page: page.value,
    }

    //获取广告位
    axios.post("/order/getWebsiteAd", adData).then(response => {
        console.log("广告位", response.data);
        // console.log("广告位信息", response.data.rows);
        total.value = response.data.count
        tableData.value = response.data.rows
        for (let item of tableData.value) {
            item.size = item.size_width + ' * ' + item.size_height + ' px '
            item.selected = false
        }
        console.log('tableData', tableData.value);
    }).catch(error => {
        console.log(error);
    })
}


// 点击提交工单信息
let submitStep = () => {
    // 表单验证
    if (ruleForm.adName == '') {
        ElMessage({
            message: '请输入广告名称',
            type: 'error',
        })
        return
    }
    if (ruleForm.adLink == '') {
        ElMessage({
            message: '请输入广告链接',
            type: 'error',
        })
        return
    }
    if (ruleForm.startTime == '') {
        ElMessage({
            message: '请选择广告持续时间!',
            type: 'error',
        })
        return
    }
    if (ruleForm.endTime == '') {
        ElMessage({
            message: '请选择广告尺寸',
            type: 'error',
        })
        return
    }
    if (ruleForm.adSize == '') {
        ElMessage({
            message: '请选择广告尺寸',
            type: 'error',
        })
        return
    }
    if (ruleForm.adImg == '') {
        ElMessage({
            message: '请添加广告图',
            type: 'error',
        })
        return
    }
    ad.value++
    // 获取广告位需要传递的参数
    let orderData = {
        name: ruleForm.adName,
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        imgurl: ruleForm.adLink,
        imgsrc: ruleForm.adImg,
        pid: pid.value,
        price: priceTotal.value
    }


    //提交工单
    axios.post("/order/addAD", orderData).then(response => {
        console.log("提交工单", response); //order_id
        console.log("orderData", orderData);

        if (response.code == 200) {
            tableData.value = response.data.rows
            orderInformation.value = response.data.ordernum
            orderId.value = response.data.order_id
        }


    }).catch(error => {
        console.log(error);
    })
}


// // 点击广告购买标签的事件驱动函数
let goBuyAd = () => {
    activeName.value = '1'
}

// 点击工单列表标签的事件驱动函数
let goOrderList = (item) => {

    if (item == 2 && (route.query.activeName == '1' || route.query.activeName == '2')) {
        // window.location.href = ('http://localhost:3000/advertising')
        window.location.href = ('http://nwdev.bjzxtw.org.cn/advertising')
    }
}


watch(adSize, (newval) => {
    // console.log('newval', newval);
    adSize.value = newval
}, {
    deep: true,
    immediate: true
})
watch(ad, (newval) => {
    // console.log('adnewval', newval);
    adSize.value = newval
}, {
    deep: true,
    immediate: true
})


</script>

<style lang="less" scoped>
// 广告页面头部
.head {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 27px;
    }

    .headLogo {

        .webName {
            display: inline-block;

            span {
                margin-right: 30px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 12px;
                color: #666666;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        >span {
            display: inline-block;
            width: 100px;
            padding-left: 25px;
            vertical-align: middle;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #333333;
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            border-left: 1px solid #ccc;
        }
    }

    .right {
        span {
            margin-left: 26px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .login,
        .reg,
        .user,
        .topic,
        .ad {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: -6px;
        }

        .topic {
            background: url("../../public/ad/shopping-mall.png") no-repeat;
        }

        .ad {
            background: url("../../public/ad/ad-product.png") no-repeat;
        }

        .login {
            background: url("../../public/ad/user.png") no-repeat;
        }

        .reg {
            background: url("../../public/ad/write.png") no-repeat;
        }

        .user {
            background: url("../../public/ad/user.png") no-repeat;
        }
    }

    .tips1 {
        padding: 20px 0;
        text-align: center;
        font-size: 20px;
        color: #40663B;
        font-weight: bold;

        img {
            width: 78px;
            height: 78px;
            vertical-align: middle;
            margin-right: 20px;

            p {
                line-height: 30px;
            }
        }

        p {
            line-height: 40px;
        }

        >p:first-child {
            margin-bottom: 30px;
        }

    }
}

//提示信息
.adtips {
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 70px;
    }

    p {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #FE0101;
        // line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}


.advertising {
    width: 100%;
    overflow: hidden;

    .inner {
        width: 1520px;
        // height: 900px;
        overflow: hidden;
        position: relative;

        // 左侧tab导航
        :deep(.el-tabs--left .el-tabs__header.is-left) {
            margin-top: 50px;
            margin-right: 10px;
        }

        // 左侧tab导航字体颜色
        :deep(.el-tabs__item.is-active),
        :deep(.el-tabs__item:hover) {
            color: #139602;
            // font-weight: bold;
        }

        // 左侧tab导航字体大小
        :deep(.el-tabs--left .el-tabs__item.is-left) {
            text-align: right;
            font-size: 20px;
        }

        // 左侧tab导航下划线
        :deep(.el-tabs__active-bar) {
            background-color: #139602;
        }

        // 广告购买
        #buyAd {
            width: 1200px;
            margin: 0 35px;

            .buyAD {
                width: 1200px;
                overflow: hidden;

                .inner {
                    width: 1200px;
                    overflow: hidden;
                    position: relative;

                    // 填写信息页tab标题
                    .tabTitle {
                        width: 1100px;
                        height: 80px;
                        padding-top: 26px;
                        margin: 0 auto;
                        box-sizing: border-box;
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

                        .icon,
                        .title {
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 16px;
                            color: #D5D5D5;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;
                        }

                        .number {
                            display: inline-block;
                            width: 32px;
                            height: 32px;
                            line-height: 32px;
                            color: #ffffff;
                            background-color: #d5d5d5;
                            border-radius: 50%;

                        }

                        .bgc {
                            background-color: #139602;
                        }

                        .color {
                            color: #139602;
                        }

                        // 填写广告信息字体及背景颜色
                        .title:first-child {
                            color: #139602;
                        }

                        .title:first-child .number {
                            background-color: #139602;
                        }

                        // 图标>>
                        .icon {
                            padding: 0 165px;
                        }

                    }

                    // 1.填写信息内容
                    .textOne {
                        width: 1100px;
                        overflow: hidden;
                        // height: 515px;
                        margin-top: 35px;
                        margin-left: 50px;

                        .pic {
                            margin-left: 30px;
                            width: 80px;
                            height: 21px;
                            padding-left: 30px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #47ACFF;
                            line-height: 19px;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }

                        //示意图
                        .my-header {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            gap: 16px;

                            .el-button {
                                border-radius: var(--el-border-radius-base);
                                font-size: var(--el-font-size-base);
                                background: #ee8787;
                                border: none;
                            }
                        }

                        .graph {
                            background-color: #fff;
                            padding: 40px 60px 80px;
                            overflow: hidden;
                            display: flex;

                            li {
                                float: left;

                                span {
                                    display: inline-block;
                                    width: 246px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: bold;
                                    font-size: 16px;
                                    color: #333333;
                                    line-height: 30px;
                                    text-align: center;
                                    margin-bottom: 15px;
                                }

                                img {
                                    width: 246px;
                                    height: 344px;
                                }
                            }

                            >li:first-child {
                                margin-right: 60px;
                            }

                            >li:last-child {
                                margin-left: 60px;
                            }
                        }

                        // 页面中的表格
                        .pageTable {
                            width: 90%;
                            overflow: hidden;
                            padding-bottom: 60px;
                            margin-left: 110px;
                            box-sizing: border-box;


                            :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
                                background-color: #333;
                                border-color: #333;
                            }

                            :deep(.el-table tr) {
                                background-color: #fafafa;
                                height: 74px;
                            }

                            :deep(.el-table .cell) {
                                text-align: center;
                                box-sizing: border-box;
                                height: 23px;
                                line-height: 23px;
                                overflow-wrap: break-word;
                                padding: 0 12px;
                                text-overflow: ellipsis;
                                white-space: normal;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        :deep(.el-select) {
                            --el-select-width: 30%;
                        }

                        :deep(.el-form-item) {
                            margin-bottom: 35px;
                        }

                        .el-col {
                            height: 36px;
                        }

                        .el-col-2 {
                            text-align: center;
                        }

                        .chooseImg {
                            display: block;
                        }

                        .chooseImgDiv {
                            font-size: 16px;
                            font-style: normal;
                        }

                        .avatar-uploader {
                            width: 120px;
                            height: 120px;
                            border: 1px solid #ededed;
                            border-radius: 12px;
                        }

                        .avatar-uploader .avatar {
                            width: 120px;
                            border-top-left-radius: 12px;
                            border-top-right-radius: 12px;
                        }

                        .avatar-uploader .el-upload {
                            border: 1px dashed var(--el-border-color);
                            border-radius: 6px;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            transition: var(--el-transition-duration-fast);
                        }

                        .avatar-uploader .el-upload:hover {
                            border-color: var(--el-color-primary);
                        }

                        .el-icon.avatar-uploader-icon {
                            display: block;
                            font-size: 36px;
                            color: #8c939d;
                            background-color: #fafafa;
                            width: 120px;
                            height: 120px;
                            padding-top: 30px;
                            box-sizing: border-box;
                            border: 1px solid #EDEDED;
                            border-radius: 12px;
                            text-align: center;
                        }

                        >p {
                            width: 1110px;
                            height: 75px;

                            strong {
                                font-weight: 500;
                                color: #333333;
                                padding: 0 14px;
                            }

                            label {
                                display: inline-block;
                                width: 125px;
                                text-align: right;
                                padding-right: 10px;
                                box-sizing: border-box;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;
                                font-style: normal;
                                text-transform: none;
                            }

                            >label::before {
                                content: "*";
                                display: inline-block;
                                width: 10px;
                                height: 2px;
                                color: #fe0101;
                            }

                            span {
                                color: #fe0101;
                                display: block;
                                padding-left: 135px;
                                height: 30px;
                            }

                            .upload-demo {
                                display: inline-block;
                                width: 112px;
                                height: 112px;
                                vertical-align: -93px;
                            }

                            //上传图片相关样式
                            .avatar-uploader .el-upload {
                                border: 1px dashed var(--el-border-color);
                                border-radius: 6px;
                                cursor: pointer;
                                position: relative;
                                overflow: hidden;
                                transition: var(--el-transition-duration-fast);
                            }

                            .avatar-uploader .el-upload:hover {
                                border-color: var(--el-color-primary);
                            }

                            .el-icon.avatar-uploader-icon {
                                font-size: 28px;
                                color: #8c939d;
                                width: 178px;
                                height: 178px;
                                text-align: center;
                            }

                            //上传图片相关样式 end


                            :deep(.el-input__wrapper.is-focus) {
                                box-shadow: 0 0 0 1px #c0c4cc;
                            }

                            :deep(.el-date-editor.el-input),
                            :deep(.el-date-editor.el-input__wrapper) {
                                height: 44px;
                                width: 470px;
                            }

                            :deep(.el-input__inner) {
                                font-size: 16px;
                            }

                            :deep(.el-upload-dragger) {
                                padding: 0;
                                margin: 0;
                                border: 1px solid #ededed;
                            }

                            :deep(.el-upload-dragger .el-icon--upload) {
                                font-size: 67px;
                                line-height: 50px;
                                padding: 0;
                                margin: 0;
                            }

                            :deep(.el-upload-dragger .el-upload__text) {
                                font-size: 18px;
                                font-weight: 400;
                                color: #999;
                                text-align: center;
                                margin-bottom: 14px;
                                margin-top: 5px;
                            }

                            :deep(.el-icon svg) {
                                width: 34px;
                                height: 34px;
                            }
                        }

                    }

                    // 2.选择相应网站
                    .textTwo {
                        width: 1200px;
                        overflow: hidden;

                        // 页面头部搜索和按钮
                        .pageTop {
                            width: 1150px;
                            height: 44px;
                            margin: 30px 0 40px 50px;

                            >.left {
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;

                                >a {
                                    width: 80px;
                                    height: 21px;
                                    padding-left: 30px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #47ACFF;
                                    line-height: 19px;
                                    text-align: left;
                                    font-style: normal;
                                    text-transform: none;
                                }

                                :deep(.el-select__wrapper.is-focused) {
                                    box-shadow: 0 0 0 1px var(--el-border-color) inset;
                                }

                            }

                            >.right {
                                button {
                                    width: 94px;
                                    height: 36px;
                                    line-height: 36px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #33B023;
                                    line-height: 19px;
                                    text-align: center;
                                    border: none;
                                    border-radius: 7px;
                                }

                                .reset {
                                    border: 1px solid #33B023;
                                    color: #33B023;
                                    background-color: #fff;
                                    margin-right: 25px;
                                }

                                .search {
                                    background-color: #33B023;
                                    color: #ffffff;
                                }
                            }

                        }

                        //示意图
                        .my-header {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            gap: 16px;

                            .el-button {
                                border-radius: var(--el-border-radius-base);
                                font-size: var(--el-font-size-base);
                                background: #ee8787;
                                border: none;
                            }
                        }

                        .graph {
                            background-color: #fff;
                            padding: 40px 60px 80px;
                            overflow: hidden;
                            display: flex;

                            li {
                                float: left;

                                span {
                                    display: inline-block;
                                    width: 246px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: bold;
                                    font-size: 16px;
                                    color: #333333;
                                    line-height: 30px;
                                    text-align: center;
                                    margin-bottom: 15px;
                                }

                                img {
                                    width: 246px;
                                    height: 344px;
                                }
                            }

                            >li:first-child {
                                margin-right: 60px;
                            }

                            >li:last-child {
                                margin-left: 60px;
                            }
                        }

                        // 页面中的表格
                        .pageTable {
                            width: 100%;
                            overflow: hidden;
                            padding-bottom: 60px;


                            :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
                                background-color: #333;
                                border-color: #333;
                            }

                            :deep(.el-table tr) {
                                background-color: #fafafa;
                                height: 74px;
                            }

                            :deep(.el-table .cell) {
                                text-align: center;
                                box-sizing: border-box;
                                height: 23px;
                                line-height: 23px;
                                overflow-wrap: break-word;
                                padding: 0 12px;
                                text-overflow: ellipsis;
                                white-space: normal;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        // 页码
                        .pagination {
                            display: flex;
                            justify-content: center;
                            // margin-top: 60px;
                            margin-bottom: 90px;

                            // 鼠标移入后字体颜色
                            :deep(.el-pagination:hover) {
                                color: #139609;
                            }

                            :deep(.el-pagination.is-background .btn-next),
                            :deep(.el-pagination.is-background .btn-prev) {
                                width: 70px;
                                height: 34px;
                                margin: 0px 10px;
                                border-radius: 4px;
                            }

                            :deep(.el-pagination.is-background .el-pager li) {
                                margin: 0px 10px;
                                width: 38px;
                                height: 34px;
                                border-radius: 4px;
                            }

                            :deep(.el-pagination.is-background .btn-next.is-active),
                            :deep(.el-pagination.is-background .btn-prev.is-active),
                            :deep(.el-pagination.is-background .el-pager li.is-active) {
                                background-color: #028e21;
                                color: #fff;
                            }
                        }

                    }

                    // 3.提交工单信息
                    .submit {
                        width: 1200px;
                        overflow: hidden;
                        text-align: center;

                        .inner {
                            width: 1100px;
                            padding-left: 50px;
                            padding-bottom: 130px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-style: normal;
                            text-transform: none;

                            // 标题
                            >h1 {
                                margin-top: 80px;
                                margin-bottom: 30px;
                                font-weight: bold;
                                font-size: 26px;
                                color: #333333;
                                line-height: 30px;
                                text-align: center;
                            }

                            // 工单编号
                            >p {
                                margin-bottom: 257px;
                                font-weight: 400;
                                font-size: 22px;
                                color: #333333;
                                text-align: center;
                            }

                            // 按钮
                            >.btn {
                                margin-bottom: 30px;

                                button {
                                    width: 134px;
                                    height: 50px;
                                    border: none;
                                    font-weight: 400;
                                    font-size: 16px;
                                    text-align: center;
                                    border-radius: 7px;
                                }

                                .check {
                                    background-color: #fff;
                                    color: #33B023;
                                    border: 1px solid #33B023;
                                    margin-right: 160px;
                                }

                                .apply {
                                    background-color: #33B023;
                                    color: #fff;
                                }
                            }

                            // 提示文字
                            >span {
                                font-weight: 400;
                                font-size: 14px;
                                color: #999999;
                            }

                        }

                    }
                }
            }
        }

        //工单列表
        #orderList {
            width: 1200px;
            margin: 0 auto;
        }


    }

    //广告页面底部部分
    .bottom {
        width: 100%;
        height: 145px;
        background-color: #ecf5ee;
        // display: none;

        .inner {
            width: 1200px;
            height: 145px;
            padding: 0;

            .amount {
                float: left;
                padding-top: 52px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                line-height: 19px;
                text-align: left;
                font-style: normal;
                text-transform: none;

                span {
                    padding: 0 15px 0 25px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #028E21;
                    line-height: 28px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .btn {
                float: right;

                .btn1 {
                    width: 115px;
                    height: 40px;
                    font-size: 16px;
                    background-color: #ffffff;
                    color: #028e21;
                    border: 1px solid #028e21;
                    border-radius: 6px;
                    margin-right: 50px;
                    margin-top: 53px;
                }

                .btn2 {
                    width: 115px;
                    height: 40px;
                    font-size: 16px;
                    background-color: #028e21;
                    color: #ffffff;
                    border: none;
                    border-radius: 6px;
                    margin: 53px 0;
                }
            }

        }
    }
}
</style>