digital_park_static/digital-park-web/digital-park/src/views/index/Service.vue

<!-- 招商服务 -->
<template>
    <div class="service" id="anchor-service">
        <div class="title">招商服务</div>
        <section class="service_box">
            <div class="left">
                <div class="tab_box pointer" v-for="item in serviceTabs" :key="item.name">
                    <div class="tab_title">{{ item.name }}</div>
                    <ul class="tab_ul">
                        <li v-for="item1 in item.children" :key="item1">{{ item1 }}</li>
                    </ul>
                </div>
                <div class="enter pointer" @click="dialogTableVisible = true">
                    <div class="left">
                        <span class="enter_title">我是企业</span>
                        <span class="enter_btn">
                            <span>我要入驻</span>
                            <i class="el-icon-right"></i>
                        </span>
                    </div>
                    <img src="@assets/image/index/icon_company_big.png" alt="企业" />
                </div>
            </div>
            <div :class="['right', lists && lists.length > 0 ? '' : 'no_data_padding']">
                <ul class="product_ul" v-if="lists && lists.length > 0">
                    <li class="pointer" v-for="item in 3">
                        <img src="" alt="" />
                        <div class="product_info">
                            <span class="product_title">
                                有限责任公司注册（松江）有限责任公司注册（松江）有限责任公司注册（松江）
                            </span>
                            <span class="product_content">
                                近年来，国家大力推行数字化建设，数字化园区是数字化建设的重要部分，也由此进入了高速发展阶段。数字化园区是传统技术与新技术结合打造的新型场景，将在园区招商、日常办公、生产制造、疫情防控等方面为…
                            </span>
                            <span class="product_price">
                                <span>
                                    价格：
                                    <span class="price">￥80.00</span>
                                    元
                                </span>
                                <span class="more"><i class="el-icon-right"></i></span>
                            </span>
                        </div>
                    </li>
                </ul>
                <div v-else class="have_no_product product_bg">
                    <div class="service_text">
                        <span>高标准厂房出租，环境优美，交通便捷</span>
                        <span>
                            可按企业需求定制，减轻企业负担
                        </span>
                    </div>
                    <div class="pointer service_btn">
                        <span>获取园区招商具体详情</span>
                        <i class="el-icon-right"></i>
                    </div>
                </div>
            </div>
        </section>
        <el-dialog
            class="dialog_box"
            :visible.sync="dialogTableVisible"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :lock-scroll="false"
            width="740px"
        >
            <div slot="title" class="header_title">
                <span class="title_text">入驻园区</span>
                <img class="pointer" src="" alt="关闭" @click="dialogTableVisible = false" />
            </div>
            <div class="dialog_content">
                <el-form label-position="right" label-width="95px">
                    <el-form-item label="*企业名称">
                        <el-input v-model="input"></el-input>
                    </el-form-item>
                    <el-form-item label="*联系方式">
                        <el-input v-model="input"></el-input>
                    </el-form-item>
                    <el-form-item label="*主营业务">
                        <el-input v-model="input"></el-input>
                    </el-form-item>
                    <el-form-item label="预计产税">
                        <el-input v-model="input"></el-input>
                    </el-form-item>
                    <el-form-item label="其他说明">
                        <el-input
                            type="textarea"
                            :rows="5"
                            resize="none"
                            v-model="input"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="submit_btn" type="primary" :loading="loading">
                            提交
                        </el-button>
                        <div class="submit_tip">提交后园区工作人员将在1-3个工作日内联系您</div>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            serviceTabs: [
                {
                    name: "产业招商",
                    children: ["集成电路", "人工智能", "生物医药", "电子信息"],
                },
                {
                    name: "招商载体",
                    children: ["集成电路", "人工智能", "生物医药", "电子信息"],
                },
            ],
            lists: [],
            dialogTableVisible: true,
            input: "",
            loading: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.service {
    @include size(100%, 910px);
    @include flex(column, center, center, null);
    background: url("~@assets/image/index/bg_service.png") no-repeat;
    background-size: 100% 100%;
}
.title {
    @include font(36px, $color-white);
    padding: 60px 0 40px;
    @include border-box;
}
.service_box {
    @include size($wrapWidth, 700px);
    background: #fff;
    padding: 30px;
    @include border-box;
    @include flex(row, space-between, flex-start, null);
    .left {
        @include size(260px, 100%);
        .tab_box {
            @include size(100%, calc((100% - 140px) / 2));
            margin-bottom: 20px;
            padding: 25px 10px 25px 30px;
            @include border-box;
            .tab_ul {
                @include flex(row, flex-start, center, wrap);
                li {
                    margin-top: 20px;
                    margin-right: 25px;
                }
            }
            &:nth-child(1) {
                background-image: linear-gradient(90deg, #0689e7 0%, #eff8fe 100%);
                .tab_title {
                    @include font(24px, $color-white);
                    border-bottom: 1px solid #d2e8f6;
                    padding-bottom: 20px;
                    @include border-box;
                }
                .tab_ul {
                    @include font(16px, $color-white);
                }
            }
            &:nth-child(2) {
                background-image: linear-gradient(90deg, #e5f3fd 0%, #fbfeff 100%);
                .tab_title {
                    @include font(24px, #334a5f);
                    border-bottom: 1px solid #d2e8f6;
                    padding-bottom: 20px;
                    @include border-box;
                }
                .tab_ul {
                    @include font(16px, #637485);
                }
            }
        }
        .enter {
            @include size(260px, 100px);
            background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
            padding: 18px 18px 18px 26px;

            @include border-box;
            @include flex(row, space-between, center, null);
            .left {
                flex: 1;
                padding-right: 48px;
                @include border-box;
                @include flex(column, space-around, flex-start, null);
                .enter_title {
                    @include font(26px, $color-white);
                }
                .enter_btn {
                    width: 100%;
                    @include font(16px, $color-white);
                    @include flex(row, space-between, center, null);
                }
            }
            img {
                @include size(64px, 64px);
                border-radius: 50%;
            }
        }
    }
    .right {
        @include size(860px, 100%);
        padding: 40px 32px 40px 38px;
        @include border-box;
        background-image: linear-gradient(90deg, #e5f3fd 0%, #fbfeff 100%);

        .product_ul {
            height: 100%;
            @include flex(column, space-between, flex-start, null);
            li {
                @include size(100%, 160px);
                @include flex(row, space-between, center, null);
                img {
                    @include size(260px, 100%);
                }
                .product_info {
                    overflow: hidden;
                    padding-left: 20px;
                    height: 100%;
                    @include border-box;
                    flex: 1;
                    @include flex(column, space-between, flex-start, null);
                }
                .product_title {
                    width: 100%;
                    @include font(18px, #334a5f);
                    font-weight: 600;
                    @include text-ellipsis;
                }
                .product_content {
                    width: 100%;
                    @include font(16px, #637485);
                    @include text-ellipsis-multiple(3);
                }
                .product_price {
                    width: 100%;
                    @include font(16px, #637485);
                    @include flex(row, space-between, center, null);
                    .price {
                        @include font(24px, #d9121a);
                    }
                    .more {
                        @include font(24px, #637485);
                    }
                }
            }
        }
        .have_no_product {
            @include flex(column, space-around, center, null);
            padding: 130px 88px;
            width: 100%;
            height: 100%;
            @include border-box;
            .service_text {
                @include font(36px, #f2faff);
                @include flex(row, center, center, wrap);
                line-height: 64px;
            }
            .service_btn {
                @include size(282px, 62px);
                @include font(20px, $color-white);
                background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
                border-radius: 8px;
                padding: 0 24px;
                @include border-box;
                @include flex(row, space-between, center, null);
            }
        }
        .product_bg {
            background: url("~@assets/image/index/product_bg.png") no-repeat;
            background-size: 100% 100%;
        }
        .service_bg {
            background: url("~@assets/image/index/service_bg.png") no-repeat;
            background-size: 100% 100%;
        }
    }
    .no_data_padding {
        padding: 28px;
        background: #e6f3fd;
    }
}
.dialog_box {
    ::v-deep .el-dialog {
        background-image: linear-gradient(180deg, #cce7fa 0%, #feffff 100%);
    }
    ::v-deep .el-dialog__header {
        padding: 0;
    }
    .header_title {
        @include size(100%, 72px);
        padding: 0 20px 0 30px;
        @include border-box;
        @include flex(row, space-between, center, null);
        border-bottom: solid 1px #637485;
        .title_text {
            @include font(24px, #334a5f);
            font-weight: 600;
        }
        img {
            @include size(36px, 36px);
        }
    }
    .dialog_content {
        padding: 0 85px;
        @include border-box;
        ::v-deep .el-form-item__label {
            @include font(16px, #637485);
        }
        ::v-deep .el-input__inner,
        ::v-deep .el-textarea__inner {
            background: transparent;
            border: 1px solid #41a6fe;
        }
        .submit_btn {
            width: 100%;
            background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
        }
        .submit_tip {
            @include font(16px, #334a5f);
            width: 100%;
            text-align: center;
        }
    }
}
</style>