|
|
@@ -1,915 +1,317 @@
|
|
|
<template>
|
|
|
- <div class="box">
|
|
|
- <div class="header-image">
|
|
|
- <img
|
|
|
- v-if="$util.localeStorage()"
|
|
|
- src="@/assets/img/ApplyFreeSample/banner_en.jpg"
|
|
|
- alt=""
|
|
|
- class="image"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="!$util.localeStorage()"
|
|
|
- src="@/assets/img/ApplyFreeSample/banner_cn.jpg"
|
|
|
- alt=""
|
|
|
- class="image"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="contentbox">
|
|
|
- <div class="topcontentbox" v-if="!$util.localeStorage()">
|
|
|
- <div class="title">提示</div>
|
|
|
- <div class="tips_b">
|
|
|
- <!-- <div class="tips_d">
|
|
|
- <div class="name">活动时间：</div>
|
|
|
- <div class="data">2024.04.22-2024.05.22</div>
|
|
|
- </div> -->
|
|
|
- <div class="tips_d">
|
|
|
- <div class="name">活动方式：</div>
|
|
|
- <div class="data">搜索您所需要的抗体，并确认加入领取清单。</div>
|
|
|
- </div>
|
|
|
- <div class="tips_d">
|
|
|
- <div class="name">活动规则：</div>
|
|
|
- <div class="data">
|
|
|
- 1. 385个现货抗体可供选择<br />
|
|
|
- 2. 每种产品限领一个，同一客户申请种类≤3个<br />
|
|
|
- 3. 抗体小样规格20 μg/个<br />
|
|
|
- <!-- 4. 点击下方“申请产品试用装”，搜索您所需要的抗体，并确认加入领取清单 -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- <div class="tips_d">
|
|
|
- <div class="data">活动最终解释权归三优生物所有。</div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
+ <div class="promotion-list">
|
|
|
+ <div class="promotion-list-item" v-for="(item, idx) in list" :key="idx">
|
|
|
+ <div class="promotion-img">
|
|
|
+ <img :src="item.imgName" />
|
|
|
</div>
|
|
|
- <div class="topcontentbox" v-if="$util.localeStorage()">
|
|
|
- <div class="title">Tips</div>
|
|
|
- <div class="tips_b">
|
|
|
- <!-- <div class="tips_d">
|
|
|
- <div class="name">Promotion Time：</div>
|
|
|
- <div class="data">2024.04.22-2024.05.22</div>
|
|
|
- </div> -->
|
|
|
- <div class="tips_d">
|
|
|
- <div class="name">Promotion Method：</div>
|
|
|
- <div class="data">
|
|
|
- Search for the antibodies you need, and add to the list.
|
|
|
+ <div class="promotion-content">
|
|
|
+ <div class="promotion-title">{{ item.title }}</div>
|
|
|
+ <div class="promotion-desc">{{ item.desc }}</div>
|
|
|
+ <div class="promotion-time" v-if="item.time.length > 0">
|
|
|
+ {{ $t("Promotion.time") }}：{{ item.time.join(" ~ ") }}
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <template v-if="isClosed(item)">
|
|
|
+ <div v-if="isClosed(item)" class="close-btn">
|
|
|
+ Ended
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="tips_d">
|
|
|
- <div class="name">Promotion Rules：</div>
|
|
|
- <div class="data">
|
|
|
- 1. 385 spot antibodies available for selection<br />
|
|
|
- 2. Each product is limited to one sample when applied, and each
|
|
|
- customer applies for ≤ 3 types of product<br />
|
|
|
- 3. 20 μg/product<br />
|
|
|
- <!-- 4. Click "Free Trial Application" below, search for the antibodoies you need, and add to the list -->
|
|
|
+ <div class="view-button disabled">
|
|
|
+ View All
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- <div class="tips_d">
|
|
|
- <div class="data">The final interpretation right of the promotion belongs to SanyouBio.</div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="bottomcontentbox_b">
|
|
|
- <p>
|
|
|
- {{ $t("inquiry.ProductInformation") }}
|
|
|
- </p>
|
|
|
- <div
|
|
|
- class="bottomcontentbox"
|
|
|
- style="font-size: 16px;font-weight: bold;"
|
|
|
- >
|
|
|
- {{ $t("applyFressSamples.SelectedSamples") }}({{ checkList.length }})
|
|
|
- </div>
|
|
|
- <div class="bottomcontentbox">
|
|
|
- <apply-sample-table :list="checkList" @delete-list="deleteList" />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="bottomcontentbox"
|
|
|
- style="font-size: 16px;font-weight: bold;margin-bottom: 10px;"
|
|
|
- >
|
|
|
- {{ $t("applyFressSamples.AllSamples") }}
|
|
|
- </div>
|
|
|
- <div class="bottomcontentbox">
|
|
|
- <div class="input_box">
|
|
|
- <el-input
|
|
|
- :placeholder="$t('input.enterkeywords')"
|
|
|
- v-model="catalog"
|
|
|
- @clear="inputClear"
|
|
|
- @change="
|
|
|
- pageable.page = 0;
|
|
|
- searchByCatalog();
|
|
|
- "
|
|
|
- clearable
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <div
|
|
|
- class="buttom"
|
|
|
- @click="
|
|
|
- pageable.page = 0;
|
|
|
- searchByCatalog();
|
|
|
- "
|
|
|
- >
|
|
|
- {{ $t("button.search") }}
|
|
|
+ </template>
|
|
|
+ <template v-else-if="isClosedActive(item)">
|
|
|
+ <div class="close-btn">
|
|
|
+ Not started
|
|
|
</div>
|
|
|
+ </template>
|
|
|
+ <div v-else class="view-button" @click="openPage(item.pageRoute)">
|
|
|
+ View All
|
|
|
</div>
|
|
|
- <el-table
|
|
|
- :data="list"
|
|
|
- ref="multipleTable"
|
|
|
- style="width: 100%; margin-top:1.5rem; margin-bottom:2rem; border-bottom: none"
|
|
|
- :empty-text="$t('table.notable')"
|
|
|
- max-height="500"
|
|
|
- :row-key="getRowKeys"
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- type="selection"
|
|
|
- :reserve-selection="true"
|
|
|
- width="40"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="catalog"
|
|
|
- :label="$t('table.catalog')"
|
|
|
- width="80"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="productName"
|
|
|
- :label="$t('table.productName')"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <!-- <el-table-column prop="date" :label="$t('table.size')" width="120px">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="size_data">50μg</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="date" :label="$t('table.quantity')" width="120px">
|
|
|
- <template slot-scope="scope">
|
|
|
- <div class="size_data">1</div>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
- <!-- <el-table-column :label="$t('table.delete')" width="120px">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button type="text" size="small"><img style="width:24px;" src="@/assets/img/delete.png" alt="" @click="deleteList(scope.$index)"></el-button>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
- </el-table>
|
|
|
- <!-- <div class="load_b" v-if="list.length > 9 && (pageable.page+1) !== moreParams.totalPages " @click="loadList">
|
|
|
- <i v-show="loadShow" class="el-icon-loading"></i>
|
|
|
- <span class="load">{{$t('table.load')}}</span>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="footerbox_b">
|
|
|
- <p>
|
|
|
- {{ $t("inquiry.YourInformation") }}
|
|
|
- </p>
|
|
|
- <div class="footerbox">
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- class="inputbox"
|
|
|
- v-model="from.name"
|
|
|
- :placeholder="$t('input.fullname')"
|
|
|
- ></el-input>
|
|
|
- <div class="red-t">*</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- class="inputbox"
|
|
|
- v-model="from.region"
|
|
|
- :placeholder="$t('input.country')"
|
|
|
- ></el-input>
|
|
|
- <!-- <div class="red-t">*</div> -->
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- class="inputbox"
|
|
|
- v-model="from.company"
|
|
|
- :placeholder="$t('input.companyInstitution')"
|
|
|
- ></el-input>
|
|
|
- <div class="red-t">*</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- class="inputbox"
|
|
|
- v-model="from.shippingAddress"
|
|
|
- :placeholder="$t('input.address_must')"
|
|
|
- ></el-input>
|
|
|
- <div class="red-t">*</div>
|
|
|
+ <div class="activity-status">
|
|
|
+ <template v-if="isClosed(item)">
|
|
|
+ <img
|
|
|
+ class="activity-status-img"
|
|
|
+ src="@/assets/img/promotion/done.png"
|
|
|
+ />
|
|
|
+ <div class="activity-status-text">
|
|
|
+ Ended
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- class="inputbox"
|
|
|
- v-model="from.email"
|
|
|
- :placeholder="$t('input.email')"
|
|
|
- ></el-input>
|
|
|
- <div class="red-t">*</div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="isClosedActive(item)">
|
|
|
+ <img
|
|
|
+ class="activity-status-img"
|
|
|
+ src="@/assets/img/promotion/done.png"
|
|
|
+ />
|
|
|
+ <div class="activity-status-text">
|
|
|
+ Not started
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- class="inputbox"
|
|
|
- v-model="from.phone"
|
|
|
- :placeholder="$t('input.tel')"
|
|
|
- ></el-input>
|
|
|
- <div class="red-t">*</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img
|
|
|
+ class="activity-status-img"
|
|
|
+ src="@/assets/img/promotion/doing.png"
|
|
|
+ />
|
|
|
+ <div class="activity-status-text">
|
|
|
+ In progress
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <el-input
|
|
|
- class="inputbox"
|
|
|
- type="textarea"
|
|
|
- :autosize="{ minRows: 4, maxRows: 6 }"
|
|
|
- v-model="from.message"
|
|
|
- :placeholder="$t('input.telFor')"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- <el-button class="buttonbox" type="primary" @click="postsubmit">{{
|
|
|
- $t("button.submit")
|
|
|
- }}</el-button>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import ApplySampleTable from "./Components/ApplySampleTable.vue";
|
|
|
-
|
|
|
export default {
|
|
|
- components: {
|
|
|
- ApplySampleTable
|
|
|
- },
|
|
|
- name: "ApplySample",
|
|
|
+ components: {},
|
|
|
+ name: "Promotion",
|
|
|
data() {
|
|
|
return {
|
|
|
- from: {
|
|
|
- company: "",
|
|
|
- shippingAddress: "",
|
|
|
- name: "",
|
|
|
- email: "",
|
|
|
- phone: "",
|
|
|
- region: "",
|
|
|
- message: ""
|
|
|
- },
|
|
|
- catalog: "", // 货号
|
|
|
- pageable: {
|
|
|
- page: 0,
|
|
|
- size: 1000
|
|
|
- },
|
|
|
- list: [],
|
|
|
- // loadShow: false,
|
|
|
- // moreParams: {},
|
|
|
- checkList: [],
|
|
|
- maxNum: 3
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ imgName: require("@/assets/img/promotion/en/banner_holophyly.png"),
|
|
|
+ title: "Whole Series Bispecific Reference Antibody",
|
|
|
+ desc: "72 bispecific reference antibodies available for selection",
|
|
|
+ time: ["2025-03-05", "2025-05-30"],
|
|
|
+ pageRoute: "/bispecific-antibody-reference"
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- // 清空
|
|
|
- inputClear() {
|
|
|
- this.pageable.page = 0;
|
|
|
- // this.searchByCatalog()
|
|
|
+ isClosed(item) {
|
|
|
+ const endTime = item.time[1];
|
|
|
+ const endTimeDate = new Date(endTime);
|
|
|
+ return Date.now() > endTimeDate.getTime();
|
|
|
},
|
|
|
- // 删除数据
|
|
|
- deleteList(e) {
|
|
|
- const targetItem = this.checkList[e];
|
|
|
+ isClosedActive(item) {
|
|
|
+ const endTime = item.time[0];
|
|
|
+ const endTimeDate = new Date(endTime);
|
|
|
+ console.log(Date.now(), endTimeDate.getTime(), Date.now() < endTimeDate.getTime());
|
|
|
+ return Date.now() < endTimeDate.getTime();
|
|
|
+ },
|
|
|
+ openPage(pageRoute) {
|
|
|
+ window.open(pageRoute, "_blank");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ created() {}
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@media screen and (min-width: 751px) and (max-width: 9999px) {
|
|
|
+ .promotion-list {
|
|
|
+ .promotion-list-item {
|
|
|
+ display: flex;
|
|
|
+ border-radius: 1px;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 31px;
|
|
|
+ padding: 22px 24px;
|
|
|
+ position: relative;
|
|
|
|
|
|
- let canDelete = false;
|
|
|
- for (var n = 0; n < this.list.length; n++) {
|
|
|
- if (this.list[n].catalog === targetItem.catalog) {
|
|
|
- canDelete = true;
|
|
|
- this.$refs.multipleTable.toggleRowSelection(this.list[n], false);
|
|
|
- }
|
|
|
+ .promotion-img {
|
|
|
+ flex: 0 0 400px;
|
|
|
+ width: 400px;
|
|
|
+ height: 200px;
|
|
|
+ border: 1px solid #d6d6d6;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
- if (!canDelete) {
|
|
|
- // this.checkList.splice(e, 1)
|
|
|
- this.$refs.multipleTable.toggleRowSelection(targetItem, false);
|
|
|
- }
|
|
|
+ .promotion-content {
|
|
|
+ width: 100%;
|
|
|
+ margin-left: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
|
|
|
- this.$message({
|
|
|
- message: this.$t("message.delete"),
|
|
|
- type: "success"
|
|
|
- });
|
|
|
- },
|
|
|
- handleChange(value) {
|
|
|
- console.log(value);
|
|
|
- },
|
|
|
- setTableRowSelected() {
|
|
|
- const listCheck = [].concat(this.checkList);
|
|
|
- if (listCheck.length === 0) {
|
|
|
- this.$refs.multipleTable.clearSelection();
|
|
|
- } else {
|
|
|
- const needToSetList = [];
|
|
|
- for (var i = 0; i < this.list.length; i++) {
|
|
|
- for (var j = 0; j < listCheck.length; j++) {
|
|
|
- if (listCheck[j].catalog === this.list[i].catalog) {
|
|
|
- needToSetList.push(this.list[i]);
|
|
|
- }
|
|
|
- }
|
|
|
+ .promotion-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 23px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
|
|
|
- if (needToSetList.length > 0) {
|
|
|
- this.$refs.multipleTable.clearSelection();
|
|
|
- needToSetList.forEach(item => {
|
|
|
- this.$refs.multipleTable.toggleRowSelection(item, true);
|
|
|
- });
|
|
|
+ .promotion-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ }
|
|
|
|
|
|
- this.checkList = listCheck;
|
|
|
+ .promotion-time {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- searchByCatalog() {
|
|
|
- // 货号查询
|
|
|
- let that = this;
|
|
|
- this.$api
|
|
|
- .post("product/crsSampleSack", {
|
|
|
- criteria: {
|
|
|
- keywords: this.catalog,
|
|
|
- types: [1, 2]
|
|
|
- },
|
|
|
- pageable: this.pageable
|
|
|
- })
|
|
|
- .then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- if (that.pageable.page === 0) {
|
|
|
- this.list = res.data.content;
|
|
|
- } else {
|
|
|
- this.list = this.list.concat(res.data.content);
|
|
|
- }
|
|
|
- this.setTableRowSelected();
|
|
|
- } else {
|
|
|
- this.$message.error(res.msg);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- postsubmit() {
|
|
|
- // 提交询单
|
|
|
- if (this.verification()) {
|
|
|
- const params = {
|
|
|
- ...this.from,
|
|
|
- inquiryType: 0,
|
|
|
- inquiryDetailList: this.checkList.map(item => {
|
|
|
- return {
|
|
|
- catalog: item.catalog,
|
|
|
- productName: item.productName,
|
|
|
- quantity: 1,
|
|
|
- size: 20,
|
|
|
- unit: "μg"
|
|
|
- };
|
|
|
- })
|
|
|
- };
|
|
|
- this.$api.post("inquiry/submitForm", params).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- this.$message({
|
|
|
- message: this.$t("message.YourInformation"),
|
|
|
- type: "success",
|
|
|
- center: true,
|
|
|
- duration: 6000,
|
|
|
- customClass: "submit-success"
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.$message.error(res.msg);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 验证
|
|
|
- verification() {
|
|
|
- if (this.checkList.length === 0) {
|
|
|
- this.$message.error(this.$t("message.goods"));
|
|
|
- return false;
|
|
|
- } else if (this.from.name === "") {
|
|
|
- this.$message.error(
|
|
|
- this.$t("input.fullname") + this.$t("message.empty")
|
|
|
- );
|
|
|
- return false;
|
|
|
- } else if (this.from.company === "") {
|
|
|
- this.$message.error(
|
|
|
- this.$t("input.companyInstitution") + this.$t("message.empty")
|
|
|
- );
|
|
|
- return false;
|
|
|
- } else if (this.from.shippingAddress === "") {
|
|
|
- this.$message.error(
|
|
|
- this.$t("input.address") + this.$t("message.empty")
|
|
|
- );
|
|
|
- return false;
|
|
|
- } else if (this.from.phone === "") {
|
|
|
- this.$message.error(this.$t("input.tel") + this.$t("message.empty"));
|
|
|
- return false;
|
|
|
- } else if (this.from.email === "") {
|
|
|
- this.$message.error(this.$t("input.email") + this.$t("message.empty"));
|
|
|
- return false;
|
|
|
- } else {
|
|
|
- return true;
|
|
|
- }
|
|
|
- },
|
|
|
- handleSelectionChange(val) {
|
|
|
- if (val.length > this.maxNum) {
|
|
|
- this.$message({
|
|
|
- message: this.$t("message.MaxNum") + this.maxNum,
|
|
|
- type: "error"
|
|
|
- });
|
|
|
|
|
|
- const targetList = val.filter(item => {
|
|
|
- return !this.checkList.includes(item);
|
|
|
- });
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
|
|
|
- if (targetList.length > 0) {
|
|
|
- this.$refs.multipleTable.toggleRowSelection(targetList[0]);
|
|
|
- }
|
|
|
+ .view-button {
|
|
|
+ width: 112px;
|
|
|
+ height: 41px;
|
|
|
+ border-radius: 1px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 41px;
|
|
|
+ color: #0166b4;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #d5edff;
|
|
|
|
|
|
- return false;
|
|
|
- }
|
|
|
+ &.disabled {
|
|
|
+ cursor: no-drop;
|
|
|
+ color: #666;
|
|
|
+ background-color: #ebebeb;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- console.log(val);
|
|
|
- this.checkList = val;
|
|
|
- },
|
|
|
- tableRowClassName({ row, rowIndex }) {
|
|
|
- if (rowIndex % 2 === 0) {
|
|
|
- return "warning-row";
|
|
|
- } else {
|
|
|
- return "success-row";
|
|
|
- }
|
|
|
- },
|
|
|
- getRowKeys(row, index) {
|
|
|
- return row.id;
|
|
|
- },
|
|
|
- // 加载更多
|
|
|
- loadList() {
|
|
|
- this.loadShow = true;
|
|
|
- this.pageable.page++;
|
|
|
- this.searchByCatalog();
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
- created() {
|
|
|
- this.searchByCatalog();
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style>
|
|
|
-@media screen and (min-width: 751px) and (max-width: 9999px) {
|
|
|
- .submit-success {
|
|
|
- top: 100px !important;
|
|
|
- height: 80px;
|
|
|
- }
|
|
|
- .submit-success > i {
|
|
|
- font-size: 24px !important;
|
|
|
- }
|
|
|
- .submit-success > p {
|
|
|
- font-size: 24px !important;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
-@media screen and (min-width: 751px) and (max-width: 9999px) {
|
|
|
- .header-image {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 20px;
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .contentbox {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .topcontentbox {
|
|
|
- border: 1px solid #dbdbdb;
|
|
|
- // padding: 1.5rem 2rem;
|
|
|
- .title {
|
|
|
- font-size: 18px;
|
|
|
- padding: 1.5rem 2rem;
|
|
|
- font-weight: 700;
|
|
|
- font-family: Arial;
|
|
|
- color: #005bab;
|
|
|
- background: #cfe0ef;
|
|
|
- }
|
|
|
- .tips_b {
|
|
|
- padding: 1.5rem 2rem 2rem 2rem;
|
|
|
- .tips_d {
|
|
|
- display: flex;
|
|
|
- font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- color: #005bab;
|
|
|
- .name {
|
|
|
- // width: 100px;
|
|
|
- font-weight: 600;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- .data {
|
|
|
- word-wrap: break-word;
|
|
|
- word-break: normal;
|
|
|
+ .close-btn {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .tips_d + .tips_d {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .bottomcontentbox_b /deep/ {
|
|
|
- margin-top: 2rem;
|
|
|
- border: 1px solid #dbdbdb;
|
|
|
- // padding: 0rem 2rem;
|
|
|
- .el-table__header-wrapper {
|
|
|
- .cell {
|
|
|
+ .activity-status {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 22px;
|
|
|
+ width: 112px;
|
|
|
+ height: 44px;
|
|
|
+ color: #fff;
|
|
|
font-size: 16px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: normal;
|
|
|
- color: #005bab;
|
|
|
- }
|
|
|
|
|
|
- .el-checkbox {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-table__body-wrapper {
|
|
|
- tr {
|
|
|
- // .el-table__cell:nth-of-type(1){
|
|
|
- // .cell{
|
|
|
- // font-size: 14px;
|
|
|
- // font-family: Arial;
|
|
|
- // color: #005BAB;
|
|
|
- // word-break: break-all;
|
|
|
- // text-overflow: ellipsis;
|
|
|
- // overflow: hidden;
|
|
|
- // display: -webkit-box;
|
|
|
- // -webkit-box-orient: vertical;
|
|
|
- // -webkit-line-clamp: 4;
|
|
|
- // margin: 8px;
|
|
|
- // text-align: center;
|
|
|
- // }
|
|
|
- // }
|
|
|
- .cell {
|
|
|
- word-break: break-word;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 4;
|
|
|
- margin: 8px 2px;
|
|
|
+ .activity-status-text {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ // top: 8px;
|
|
|
+ // right: 17px;
|
|
|
+ left: 50%;
|
|
|
+ top: 8px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ white-space: nowrap;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .bottomcontentbox_b > p {
|
|
|
- font-size: 18px;
|
|
|
- padding: 1.5rem 2rem;
|
|
|
- font-weight: 700;
|
|
|
- font-family: Arial;
|
|
|
- color: #005bab;
|
|
|
- background: #cfe0ef;
|
|
|
- margin-bottom: 1.5rem;
|
|
|
- }
|
|
|
- .bottomcontentbox /deep/ {
|
|
|
- // margin-top: 2rem;
|
|
|
- padding: 0rem 2rem;
|
|
|
- overflow: hidden;
|
|
|
- .el-table {
|
|
|
- border: 1px solid #dfdfdf;
|
|
|
- }
|
|
|
- .el-table__row {
|
|
|
- .el-table__cell {
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 0px) and (max-width: 750px) {
|
|
|
+ .promotion-list {
|
|
|
+ margin-top: -20px;
|
|
|
|
|
|
- .size_data {
|
|
|
+ .promotion-list-item {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ border-radius: 1px;
|
|
|
+ border: 1px solid #d9d9d9;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 31px;
|
|
|
+ padding: 10px;
|
|
|
+ position: relative;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- .input_box /deep/ {
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .title {
|
|
|
- color: #005bab;
|
|
|
- font-size: 0.14rem;
|
|
|
- margin-right: 0.04rem;
|
|
|
- }
|
|
|
- .el-input {
|
|
|
- width: 200px;
|
|
|
- // flex: 1;
|
|
|
- // font-size: 0.14rem;
|
|
|
- }
|
|
|
- .buttom {
|
|
|
- // width: 100px;
|
|
|
- text-align: center;
|
|
|
- padding: 0 10px;
|
|
|
- line-height: 40px;
|
|
|
- color: #fff;
|
|
|
- background-color: #005bab;
|
|
|
- border-radius: 4px;
|
|
|
- margin-left: 20px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ .promotion-img {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
|
|
|
- .footerbox_b {
|
|
|
- margin-top: 2rem;
|
|
|
- border: 1px solid #dbdbdb;
|
|
|
- // padding: 0rem 2rem;
|
|
|
- margin-bottom: 3rem;
|
|
|
- }
|
|
|
- .footerbox_b > p {
|
|
|
- font-size: 1.4rem;
|
|
|
- padding: 1.5rem 2rem;
|
|
|
- font-weight: 700;
|
|
|
- color: #005bab;
|
|
|
- background: #cfe0ef;
|
|
|
- margin-bottom: 1.5rem;
|
|
|
- }
|
|
|
- .footerbox {
|
|
|
- padding: 0rem 2rem;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .footerbox > div {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 1.4rem;
|
|
|
- }
|
|
|
- .inputbox {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .footerbox > div > .red-t {
|
|
|
- font-size: 1.5rem;
|
|
|
- color: #e52323;
|
|
|
- position: absolute;
|
|
|
- top: 40%;
|
|
|
- left: -1rem;
|
|
|
- }
|
|
|
- .buttonbox {
|
|
|
- width: 100%;
|
|
|
- background: #0166b4;
|
|
|
- height: 3rem;
|
|
|
- padding: 0;
|
|
|
- margin-bottom: 2rem;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- .load_b {
|
|
|
- margin: 1.2rem 0;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- color: #005bab;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- .el-icon-loading {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- .load {
|
|
|
- display: block;
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .promotion-content {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
|
|
|
-@media screen and (min-width: 0px) and (max-width: 750px) {
|
|
|
- .header-image {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 0.1rem;
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .contentbox {
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .topcontentbox {
|
|
|
- border: 1px solid #dbdbdb;
|
|
|
- .title {
|
|
|
- font-size: 0.16rem;
|
|
|
- padding: 0.14rem 0.23rem;
|
|
|
- font-weight: 700;
|
|
|
- color: #005bab;
|
|
|
- background: #cfe0ef;
|
|
|
- }
|
|
|
- .tips_b {
|
|
|
- padding: 0.14rem;
|
|
|
- .tips_d {
|
|
|
- // display: flex;
|
|
|
- font-size: 0.14rem;
|
|
|
- color: #005bab;
|
|
|
- .name {
|
|
|
- // width: 1.2rem;
|
|
|
- font-weight: 600;
|
|
|
- white-space: nowrap;
|
|
|
+ .promotion-title {
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 23px;
|
|
|
+ padding-bottom: 23px;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
- .data {
|
|
|
- margin-top: 0.06rem;
|
|
|
- word-wrap: break-word;
|
|
|
- word-break: normal;
|
|
|
+
|
|
|
+ .promotion-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
}
|
|
|
- }
|
|
|
- .tips_d + .tips_d {
|
|
|
- margin-top: 0.1rem;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .topcontentbox > p:nth-of-type(1) {
|
|
|
- font-size: 0.16rem;
|
|
|
- padding: 0.14rem 0.23rem;
|
|
|
- font-weight: 700;
|
|
|
- color: #005bab;
|
|
|
- background: #cfe0ef;
|
|
|
- }
|
|
|
- .topcontentbox > p:nth-of-type(2) {
|
|
|
- padding: 0.14rem;
|
|
|
- font-size: 0.16rem;
|
|
|
- color: #005bab;
|
|
|
- word-wrap: break-word;
|
|
|
- word-break: normal;
|
|
|
- }
|
|
|
|
|
|
- .bottomcontentbox_b {
|
|
|
- margin-top: 0.2rem;
|
|
|
- border: 1px solid #dbdbdb;
|
|
|
- // padding: 0rem 2rem;
|
|
|
- }
|
|
|
- .bottomcontentbox_b > p {
|
|
|
- font-size: 0.16rem;
|
|
|
- padding: 0.14rem 0.23rem;
|
|
|
- font-weight: 700;
|
|
|
- color: #005bab;
|
|
|
- background: #cfe0ef;
|
|
|
- margin-bottom: 0.14rem;
|
|
|
- }
|
|
|
- .bottomcontentbox /deep/ {
|
|
|
- // margin-top: 2rem;
|
|
|
- padding: 0rem 0.14rem;
|
|
|
- overflow: hidden;
|
|
|
- .el-table {
|
|
|
- border: 1px solid #dfdfdf;
|
|
|
- margin-top: 0.12rem !important ;
|
|
|
- margin-bottom: 0.14rem !important ;
|
|
|
- .el-table__header-wrapper {
|
|
|
- .el-checkbox {
|
|
|
- display: none;
|
|
|
+ .promotion-time {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
|
|
|
- width: 100%;
|
|
|
- .el-table__header {
|
|
|
- width: 100% !important;
|
|
|
- thead {
|
|
|
- tr {
|
|
|
- th {
|
|
|
- .cell {
|
|
|
- font-size: 12px;
|
|
|
- padding: 0 4px;
|
|
|
- font-family: Arial;
|
|
|
- font-weight: bold;
|
|
|
- color: #005bab;
|
|
|
- }
|
|
|
- }
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .view-button {
|
|
|
+ width: 112px;
|
|
|
+ height: 41px;
|
|
|
+ border-radius: 1px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 41px;
|
|
|
+ color: #0166b4;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #d5edff;
|
|
|
+
|
|
|
+ &.disabled {
|
|
|
+ display: none;
|
|
|
+ cursor: no-drop;
|
|
|
+ color: #666;
|
|
|
+ background-color: #ebebeb;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .el-table__body-wrapper {
|
|
|
- .el-table__body {
|
|
|
- width: 100% !important;
|
|
|
- tbody {
|
|
|
- .el-table__row {
|
|
|
- .el-table__cell {
|
|
|
- padding: 0;
|
|
|
- .cell {
|
|
|
- font-size: 12px;
|
|
|
- padding: 0 4px;
|
|
|
- line-height: 0.24rem;
|
|
|
- word-break: break-word;
|
|
|
- .size_data {
|
|
|
- .size_q {
|
|
|
- width: 40% !important;
|
|
|
- max-width: 100px;
|
|
|
- .el-input__inner {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-select {
|
|
|
- max-width: 100px;
|
|
|
- width: 60% !important;
|
|
|
- .el-input__inner {
|
|
|
- padding-right: 16px;
|
|
|
- }
|
|
|
- .el-input__suffix {
|
|
|
- .el-select__caret {
|
|
|
- width: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-input-number {
|
|
|
- .el-input-number__decrease {
|
|
|
- width: 0.16rem;
|
|
|
- }
|
|
|
- .el-input-number__increase {
|
|
|
- width: 0.16rem;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ .close-btn {
|
|
|
+ width: 112px;
|
|
|
+ height: 41px;
|
|
|
+ line-height: 41px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ababab;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
- .cell {
|
|
|
- word-break: break-all;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 4;
|
|
|
- }
|
|
|
}
|
|
|
- .el-table__empty-block {
|
|
|
- width: 100% !important;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .size_data {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ .activity-status {
|
|
|
+ display: none;
|
|
|
|
|
|
- .input_box /deep/ {
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .title {
|
|
|
- color: #005bab;
|
|
|
- font-size: 0.14rem;
|
|
|
- margin-right: 0.04rem;
|
|
|
- }
|
|
|
- .el-input {
|
|
|
- flex: 1;
|
|
|
- width: 100px;
|
|
|
- // font-size: 0.14rem;
|
|
|
- }
|
|
|
- .buttom {
|
|
|
- // width: 100px;
|
|
|
- text-align: center;
|
|
|
- padding: 0 10px;
|
|
|
- line-height: 40px;
|
|
|
- color: #fff;
|
|
|
- background-color: #005bab;
|
|
|
- border-radius: 4px;
|
|
|
- margin-left: 20px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 22px;
|
|
|
+ width: 112px;
|
|
|
+ height: 44px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
|
|
|
- .footerbox_b {
|
|
|
- margin-top: 0.2rem;
|
|
|
- border: 1px solid #dbdbdb;
|
|
|
- // padding: 0rem 2rem;
|
|
|
- }
|
|
|
- .footerbox_b > p {
|
|
|
- font-size: 0.16rem;
|
|
|
- padding: 0.14rem 0.23rem;
|
|
|
- font-weight: 700;
|
|
|
- color: #005bab;
|
|
|
- background: #cfe0ef;
|
|
|
- }
|
|
|
- .footerbox {
|
|
|
- margin-top: 0.14rem;
|
|
|
- padding: 0rem 0.14rem;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .footerbox > div {
|
|
|
- position: relative;
|
|
|
- margin-bottom: 0.15rem;
|
|
|
- margin-left: 0.1rem;
|
|
|
- }
|
|
|
- .inputbox {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .footerbox > div > .red-t {
|
|
|
- font-size: 0.2rem;
|
|
|
- color: #e52323;
|
|
|
- position: absolute;
|
|
|
- top: 40%;
|
|
|
- left: -0.1rem;
|
|
|
- }
|
|
|
- .buttonbox {
|
|
|
- width: 100%;
|
|
|
- background: #0166b4;
|
|
|
- height: 0.4rem;
|
|
|
- padding: 0;
|
|
|
- margin-bottom: 0.14rem;
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
- .load_b {
|
|
|
- margin: 0.2rem 0;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Arial;
|
|
|
- color: #005bab;
|
|
|
- text-align: center;
|
|
|
- cursor: pointer;
|
|
|
- .el-icon-loading {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- .load {
|
|
|
- display: block;
|
|
|
- line-height: 32px;
|
|
|
+ .activity-status-text {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
