cxc/cas_cloud_web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

首页搜索

Browse Source
This commit is contained in:
cxc
2022-10-13 17:42:32 +08:00
parent e8fb69f0e3
commit e2da1fd45b
46 changed files with 7598 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
src/views/website/activity/activity.vue
View File

@ -1,7 +1,405 @@
<template>
活动
<WebFooter></WebFooter>
<div class="activity" v-loading="loading">
<!-- <webReleaseActive v-model:dialogVisible="dialogVisible"></webReleaseActive> -->
<el-dialog title="发布活动" v-model="dialogVisible" width="380px">
<div class="contact-admin">
<qrcode-vue :value="`tel:${mobile}`" :size="300" level="H" />
<p class="description">请联系管理员，电话：{{ mobile }}</p>
</div>
</el-dialog>
<div
v-if="!state.banner"
class="_banner"
style="height: 394px; background-color: #ccc"
>
<div class="_publish conter1000">
<el-button @click="dialogVisible = true">发布活动</el-button>
</div>
</div>
<div
v-else
class="_banner"
style="height: 394px; background-size: cover"
:style="{ backgroundImage: `url(${state.banner})` }"
>
<div class="_publish conter1000">
<el-button @click="publicActivity">发布活动</el-button>
</div>
</div>
<div>
<router-view />
</div>
<!-- <div class="box conter1000" v-show="!isShow">
<el-row :gutter="10">
<el-col :span="5">
<el-select
v-model="queryParams.value"
placeholder="活动分类"
></el-select>
</el-col>
<el-col :span="5">
<el-select
v-model="queryParams.value2"
placeholder="活动状态"
></el-select>
</el-col>
<el-col :span="14">
<el-input v-model="queryParams.value3" placeholder="请输入关键词">
<template #append>
<el-button>搜索</el-button>
</template>
</el-input>
</el-col>
</el-row>
<div v-loading="loading">
<div
class="_item pointer"
v-for="item in dataList"
:key="item.id"
@click="handleDetail(item)"
>
<div class="_l">
<el-image
style="width: 358px; height: 200px; vertical-align: middle"
:src="item.src"
fit="fill"
></el-image>
</div>
<div class="_r">
<p class="text_hidden">{{ item.title }}</p>
<div class="_time">活动时间：{{ item.time }}</div>
<div class="_info">
<span class="fl"
><span class="x_blue">{{ item.user }}</span> 人报名</span
>
<el-button class="fr x_btns" v-if="item.status == 1" disabled
>已报名</el-button
>
<el-button
v-else-if="item.status == 2"
class="fr x16 x_blue x_border_blue"
style="border-radius: 0"
>报名</el-button
>
<el-button
v-else
class="fr x16"
style="border-radius: 0"
type="info"
disabled
>已结束</el-button
>
</div>
</div>
</div>
</div>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</div>
<div class="box2 conter1000" v-show="isShow">
<webBreadcrumb
v-model:isShow="isShow"
v-model:breadcrumbTitle="breadcrumbTitle"
></webBreadcrumb>
<div class="_head">
<div class="_l">
<el-image
style="width: 358px; height: 100%; vertical-align: middle"
src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg"
fit="cover"
></el-image>
</div>
<div class="_r">
<p class="_title text_hidden">
订单利润模型——构建企业利润机器人智能感知与控制专场 |
合肥高新区科技成果供需对接活动
</p>
<p class="_brief text_hidden">
活动简介：订单利润模型——构建企业利润机器人智能感知与控制专场 |
合肥高新企业利润机 区科技成果
供需对接活动订单利润模型——构建企业利润机器人智能感知供需对接活动订单利润模型——构建企业利润机器人智能感知
</p>
<p class="_classif">活动分类：教育</p>
<p class="_time">
活动时间：2021-10-14 13:30:00 ~ 2021-10-16 16:30:00
</p>
<p class="_place">
活动地点：安徽省-合肥市-蜀山区 科学大道233号来福酒店1号会议厅
</p>
<p class="_user">
<el-button class="x_btns" disabled>已报名</el-button>
<span class="_num"><span class="x_blue">16</span> 人报名</span>
</p>
</div>
</div>
<div class="_info">
<div class="_l">
<p class="_tit">活动详情</p>
<div class="_txt">
本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
</div>
<div class="_txt">
本项目将生产废水分质处理后，提升进入曝气微电解反应器内，通过铁、碳原料在酸性情况下形成微电池，首先对铜氨络合物破络；其次对油墨等有机物质开环断链，提高废水的可生化性。更突出的是，利用金属离子的活性：铁置换其他金属离子，从而从废水中除去，然后经生化系统处理后，出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单、出水稳定达标等优点。
出水各污染物指标稳定达标排放。本项目具有处理效率高、以废治废能耗低、管理简单出水稳定达标等优点。
</div>
</div>
<div class="_r">联系我</div>
</div>
</div> -->
<webFooter></webFooter>
</div>
</template>
<script setup name="Activity">
import WebFooter from "@/components/webFooter/index.vue";
import QrcodeVue from "qrcode.vue";
import { banner } from "@/api/website/home/index";
import request from "@/utils/request";
import webFooter from "@/components/webFooter/index.vue";
// import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
// import webReleaseActive from "@/components/webReleaseActive/index.vue";
const dialogVisible = ref(false);
const loading = ref(true);
const total = ref(1);
const state = reactive({
banner: "",
});
let dataList = ref([]);
const isShow = ref(false);
let breadcrumbTitle = reactive({
id: null,
title: "",
twoTitle: "",
});
/** 查询 */
function getList() {
loading.value = true;
setTimeout(() => {
dataList.value = [
{
id: 1,
title:
"订单利润模型——构建企业利润机器人智能感知与控制专场 | 合肥高新区科技成果供需对接活动",
src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
time: "2021-10-14 13:30:00 ~ 2021-10-16 16:30:00",
user: 16,
status: 1,
},
{
id: 2,
title:
"订单利润模型——构建企业利润机器人智能感知与控制专场 | 合肥高新区科技成果供需对接活动",
src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
time: "2021-10-14 13:30:00 ~ 2021-10-16 16:30:00",
user: 17,
status: 2,
},
{
id: 3,
title:
"订单利润模型——构建企业利润机器人智能感知与控制专场 | 合肥高新区科技成果供需对接活动",
src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
time: "2021-10-14 13:30:00 ~ 2021-10-16 16:30:00",
user: 18,
status: 3,
},
];
loading.value = false;
}, 500);
}
function handleDetail(item) {
breadcrumbTitle.id = item.id;
breadcrumbTitle.title = "活动报名";
breadcrumbTitle.twoTitle = "活动报名详情";
isShow.value = !isShow.value;
}
const mobile = ref("");
function config(params) {
return request({
url: "/v1/config",
params,
});
}
const publicActivity = async () => {
// const { data } = await config({ key: "mobile" });
const data = { mobile: { name: "联系电话", value: "18156053255" } };
mobile.value = data.mobile.value;
dialogVisible.value = true;
};
getList();
onMounted(() => {
banner({ locals: "活动报名" })
.then((resp) => {
state.banner = resp.data[0].images;
loading.value = false;
})
.catch(() => {
loading.value = false;
});
});
</script>
<style lang="scss" scoped>
.activity {
background-color: #f2f6ff;
.contact-admin {
display: flex;
flex-direction: column;
align-items: center;
.description {
font-size: 20px;
}
}
._banner {
position: relative;
._publish {
position: relative;
.el-button {
position: absolute;
top: 171px;
right: 46px;
background-color: #ffc600;
color: #fff;
border: 0;
border-radius: 0;
font-size: 36px;
font-weight: bold;
}
}
}
.box {
position: relative;
padding-top: 20px;
.el-input {
::v-deep(.el-input__inner) {
border-right: 0;
}
::v-deep(.el-input-group__append) {
overflow: hidden;
font-size: 16px;
color: #fff;
border-top-color: #0054ff;
border-right-color: #0054ff;
border-bottom-color: #0054ff;
background-color: #0054ff;
}
}
._item {
display: flex;
margin-top: 16px;
._r {
flex: 1;
padding: 36px 20px 0 16px;
background-color: #fff;
p {
margin-top: 0;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 30px;
}
._time {
margin-bottom: 7px;
font-size: 16px;
font-weight: 400;
color: #666666;
}
._info {
.fl {
font-size: 16px;
font-weight: 400;
color: #666666;
span {
font-size: 30px;
}
}
}
}
}
}
.box2 {
._head {
padding: 20px;
background-color: #fff;
display: flex;
._r {
padding-left: 18px;
p {
margin: 11px 0;
}
._title {
font-size: 18px;
font-weight: 500;
color: #333333;
line-height: 30px;
}
._brief,
._classif,
._time,
._place {
font-size: 14px;
font-weight: 400;
color: #666666;
}
._brief {
line-height: 24px;
}
._user {
margin-bottom: 0;
display: flex;
align-items: flex-end;
._num {
margin-left: 10px;
font-size: 16px;
font-weight: 400;
color: #666666;
.x_blue {
font-size: 30px;
}
}
}
}
}
._info {
display: flex;
margin-top: 16px;
margin-bottom: 35px;
._l {
width: 662px;
margin-right: 14px;
padding: 14px 40px 0 20px;
background-color: #fff;
._tit {
&::before {
content: "";
display: inline-block;
margin-right: 5px;
width: 5px;
height: 5px;
background-color: #0054ff;
vertical-align: middle;
}
}
._txt {
margin-bottom: 45px;
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 24px;
}
}
._r {
flex: 1;
background-color: #fff;
}
}
}
}
</style>