|
|
|
|
@ -1,48 +1,42 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 封面 -->
|
|
|
|
|
<div class="bg-wrap my-animation-slide-top">
|
|
|
|
|
<!-- 背景图片 -->
|
|
|
|
|
<el-image class="love-image my-el-image"
|
|
|
|
|
lazy
|
|
|
|
|
:src="love.bgCover"
|
|
|
|
|
fit="cover">
|
|
|
|
|
<div slot="error" class="image-slot"></div>
|
|
|
|
|
</el-image>
|
|
|
|
|
|
|
|
|
|
<!-- 对象 -->
|
|
|
|
|
<div class="love-wrap transformCenter">
|
|
|
|
|
<div>
|
|
|
|
|
<el-avatar class="love-avatar" :src="love.manCover"></el-avatar>
|
|
|
|
|
<div class="love-title">
|
|
|
|
|
{{love.manName}}
|
|
|
|
|
<div class="card-content1 shadow-box background-opacity">
|
|
|
|
|
|
|
|
|
|
<div class="bg-wrap my-animation-slide-top">
|
|
|
|
|
<el-image class="love-image my-el-image" lazy :src="love.bgCover" fit="cover" style="width: 100%; height: 100vh;">
|
|
|
|
|
<div slot="error" class="image-slot"></div>
|
|
|
|
|
</el-image>
|
|
|
|
|
|
|
|
|
|
<div class="love-wrap transformCenter">
|
|
|
|
|
<div>
|
|
|
|
|
<el-avatar class="love-avatar" :src="love.manCover"></el-avatar>
|
|
|
|
|
<div class="love-title">{{love.manName}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<img class="love-img" :src="$constant.loveLike" alt="心心">
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-avatar class="love-avatar" :src="love.womanCover"></el-avatar>
|
|
|
|
|
<div class="love-title">
|
|
|
|
|
{{love.womanName}}
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<el-avatar class="love-avatar" :src="love.womanCover"></el-avatar>
|
|
|
|
|
<div class="love-title">{{love.womanName}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="bannerWave1"></div>
|
|
|
|
|
<div id="bannerWave2"></div>
|
|
|
|
|
<div id="bannerWave1"></div>
|
|
|
|
|
<div id="bannerWave2"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 内容 -->
|
|
|
|
|
<div class="love-container">
|
|
|
|
|
|
|
|
|
|
<div class="myCenter love-content">
|
|
|
|
|
<!-- 时间 -->
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 计时 -->
|
|
|
|
|
<div>
|
|
|
|
|
<div class="love-time-title1">
|
|
|
|
|
这是我们一起走过的
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="love-time1">
|
|
|
|
|
第
|
|
|
|
|
<span class="love-time1-item">{{timing.year}}</span>
|
|
|
|
|
@ -65,11 +59,12 @@
|
|
|
|
|
{{love.countdownTitle}}: {{countdownChange}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="padding: 0 20px">
|
|
|
|
|
<div class="family-button shadow-box-mini" @click="changeCard(4)">
|
|
|
|
|
<span class="family-button-title">{{card === 4 ? '回到主人家' : '开往表白墙'}}</span>
|
|
|
|
|
|
|
|
|
|
<span class="family-button-car">
|
|
|
|
|
<svg viewBox="0 0 1024 1024" width="40" height="40">
|
|
|
|
|
<path
|
|
|
|
|
@ -108,39 +103,44 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="padding: 0 20px">
|
|
|
|
|
<!-- 卡片 -->
|
|
|
|
|
<div class="card-wrap" v-show="card !== 4">
|
|
|
|
|
<div class="card-content shadow-box-mini" @click="changeCard(1)">
|
|
|
|
|
<div>
|
|
|
|
|
<el-avatar :size="100"
|
|
|
|
|
:src="$constant.loveWeiYan">
|
|
|
|
|
</el-avatar>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-right">
|
|
|
|
|
<div class="card-title">
|
|
|
|
|
点点滴滴
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-desc">
|
|
|
|
|
☀️今朝有酒今朝醉
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div style="width: 350px ;padding: 15px;border-radius: 10px;margin-top: 30px;animation: hideToShow 1s ease-in-out" class="card-wrap card-content shadow-box-mini background-opacity wow" v-show="card !== 4">
|
|
|
|
|
<div style="display: flex; flex-wrap: wrap">
|
|
|
|
|
<div style="flex-basis: 100%; margin-bottom: 10px;">
|
|
|
|
|
<div style="color: var(--lightGreen);font-size: 20px;font-weight: bold;margin-bottom: 10px; white-space: nowrap;">
|
|
|
|
|
预测DDI
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="card-content shadow-box-mini" @click="changeCard(2)">
|
|
|
|
|
<div>
|
|
|
|
|
<el-avatar :size="100"
|
|
|
|
|
:src="$constant.lovePhoto">
|
|
|
|
|
</el-avatar>
|
|
|
|
|
<div style="flex-basis: 100%; margin-bottom: 10px;">
|
|
|
|
|
<input class="ais-SearchBox-input" type="text"
|
|
|
|
|
v-model="smiles1"
|
|
|
|
|
placeholder="请输入SMILES" maxlength="32">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-right">
|
|
|
|
|
<div class="card-title">
|
|
|
|
|
时光相册
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-desc">
|
|
|
|
|
📸记录美好瞬间
|
|
|
|
|
<div style="flex-basis: 100%; margin-bottom: 10px;">
|
|
|
|
|
<input class="ais-SearchBox-input" type="text"
|
|
|
|
|
v-model="smiles2"
|
|
|
|
|
placeholder="请输入SMILES" maxlength="32">
|
|
|
|
|
</div>
|
|
|
|
|
<div style="flex-basis: 100%; margin-bottom: 10px;">
|
|
|
|
|
<div class="ais-SearchBox-input" style="background-color: white; padding: 6px; border-radius: 4px;border: none; text-align: center;">
|
|
|
|
|
{{predictResult}}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="ais-SearchBox-submit" @click="handleQuery();" style="flex-basis: 100%;display: flex; justify-content: right; align-items: center;" >
|
|
|
|
|
<svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
|
|
|
|
|
<path d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z" fill="#51C492"></path>
|
|
|
|
|
<path d="M772.8 718.4c48-58.4 76.8-132.8 76.8-213.6 0-186.4-151.2-337.6-337.6-337.6-186.4 0-337.6 151.2-337.6 337.6 0 186.4 151.2 337.6 337.6 337.6 81.6 0 156-28.8 213.6-76.8L856 896l47.2-47.2-130.4-130.4zM512 776c-149.6 0-270.4-121.6-270.4-271.2S363.2 233.6 512 233.6c149.6 0 271.2 121.6 271.2 271.2C782.4 654.4 660.8 776 512 776z" fill="#FFFFFF"></path>
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 卡片 -->
|
|
|
|
|
<div class="card-wrap" v-show="card !== 4">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card-content shadow-box-mini" @click="changeCard(3)">
|
|
|
|
|
<div>
|
|
|
|
|
@ -150,15 +150,28 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-right">
|
|
|
|
|
<div class="card-title">
|
|
|
|
|
祝福板
|
|
|
|
|
记录
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-desc">
|
|
|
|
|
📋写下对我们的祝福
|
|
|
|
|
📋写下你的开发记录
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="myCenter love-content">
|
|
|
|
|
<!-- 时间 -->
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 计时 -->
|
|
|
|
|
<div>
|
|
|
|
|
<div class="love-time-title1">
|
|
|
|
|
<a class="collection-btn" @click="showTip()">
|
|
|
|
|
<i class="el-icon-star-off" style="margin-right: 2px"></i>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-container">
|
|
|
|
|
<div v-show="card === 1 && !$common.isEmpty(treeHoleList)">
|
|
|
|
|
<treeHole :treeHoleList="treeHoleList"
|
|
|
|
|
@ -239,7 +252,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="family-bottom" style="background-color: var(--lightGreen)" @click="addFamily()">
|
|
|
|
|
<span style="line-height: 50px">
|
|
|
|
|
申请入住
|
|
|
|
|
设置
|
|
|
|
|
</span>
|
|
|
|
|
<span style="vertical-align:middle">
|
|
|
|
|
<svg viewBox="0 0 1024 1024" width="30" height="30"><path
|
|
|
|
|
@ -256,7 +269,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="入住表白墙"
|
|
|
|
|
<el-dialog title="开启你的记录流程吧"
|
|
|
|
|
:visible.sync="loveDialogVisible"
|
|
|
|
|
width="40%"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
@ -287,7 +300,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="form-title">
|
|
|
|
|
男生头像
|
|
|
|
|
头像
|
|
|
|
|
</div>
|
|
|
|
|
<div style=" display: flex">
|
|
|
|
|
<el-input maxlength="120" v-model="userLove.manCover"></el-input>
|
|
|
|
|
@ -302,12 +315,12 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="form-title">
|
|
|
|
|
女生头像
|
|
|
|
|
项目logo
|
|
|
|
|
</div>
|
|
|
|
|
<div style=" display: flex">
|
|
|
|
|
<el-input maxlength="120" v-model="userLove.womanCover"></el-input>
|
|
|
|
|
<div style="margin: 3px 0 0 10px">
|
|
|
|
|
<proButton :info="'上传头像'"
|
|
|
|
|
<proButton :info="'上传logo'"
|
|
|
|
|
@click.native="openPicture('womanCover')"
|
|
|
|
|
:before="$constant.before_color_1"
|
|
|
|
|
:after="$constant.after_color_1">
|
|
|
|
|
@ -317,7 +330,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="form-title">
|
|
|
|
|
男生昵称
|
|
|
|
|
昵称
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-input maxlength="10" v-model="userLove.manName"></el-input>
|
|
|
|
|
@ -325,7 +338,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="form-title">
|
|
|
|
|
女生昵称
|
|
|
|
|
项目名
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-input maxlength="10" v-model="userLove.womanName"></el-input>
|
|
|
|
|
@ -369,7 +382,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="form-title">
|
|
|
|
|
告白信
|
|
|
|
|
简述
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-input type="textarea"
|
|
|
|
|
@ -391,7 +404,7 @@
|
|
|
|
|
<div>
|
|
|
|
|
<img :src="$constant.friendLetterBiLi" style="width: 100%;margin: 5px auto"/>
|
|
|
|
|
</div>
|
|
|
|
|
<p style="font-size: 12px;text-align: center;color: #999">欢迎入住表白墙</p>
|
|
|
|
|
<p style="font-size: 12px;text-align: center;color: #999">开启记录</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -413,12 +426,15 @@
|
|
|
|
|
<!-- 页脚 -->
|
|
|
|
|
<myFooter></myFooter>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import {listTable1, predictReaction} from "@/utils/table1";
|
|
|
|
|
|
|
|
|
|
const treeHole = () => import( "./common/treeHole");
|
|
|
|
|
const comment = () => import( "./comment/comment");
|
|
|
|
|
const myFooter = () => import( "./common/myFooter");
|
|
|
|
|
@ -440,6 +456,9 @@
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
predictResult:'type预测结果',
|
|
|
|
|
smiles1 :'',
|
|
|
|
|
smiles2 :'',
|
|
|
|
|
userLove: {
|
|
|
|
|
bgCover: "",
|
|
|
|
|
manCover: "",
|
|
|
|
|
@ -451,6 +470,15 @@
|
|
|
|
|
timing: "",
|
|
|
|
|
familyInfo: ""
|
|
|
|
|
},
|
|
|
|
|
pagination: {
|
|
|
|
|
current: 1,
|
|
|
|
|
size: 5,
|
|
|
|
|
recommendStatus: true
|
|
|
|
|
},
|
|
|
|
|
recommendArticles: [],
|
|
|
|
|
admires: [],
|
|
|
|
|
showAdmireDialog: false,
|
|
|
|
|
articleSearch: "",
|
|
|
|
|
loveDialogVisible: false,
|
|
|
|
|
addPictureDialog: false,
|
|
|
|
|
pictureType: "",
|
|
|
|
|
@ -495,7 +523,14 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
computed: {},
|
|
|
|
|
computed: {
|
|
|
|
|
webInfo() {
|
|
|
|
|
return this.$store.state.webInfo;
|
|
|
|
|
},
|
|
|
|
|
sortInfo() {
|
|
|
|
|
return this.$store.state.sortInfo;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
watch: {},
|
|
|
|
|
|
|
|
|
|
@ -503,6 +538,8 @@
|
|
|
|
|
this.getAdminFamily();
|
|
|
|
|
this.card = 1;
|
|
|
|
|
this.getWeiYan();
|
|
|
|
|
this.getRecommendArticles();
|
|
|
|
|
this.getAdmire();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -510,6 +547,65 @@
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
/** 预测按钮操作 */
|
|
|
|
|
handleQuery() {
|
|
|
|
|
this.predictResult = '输入的SMILES错误，请重试';
|
|
|
|
|
predictReaction(this.smiles1, this.smiles2)
|
|
|
|
|
.then(prediction => {
|
|
|
|
|
this.predictResult = "type:"+prediction;
|
|
|
|
|
})
|
|
|
|
|
.catch(error => {
|
|
|
|
|
console.error(error);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
selectSort(sort) {
|
|
|
|
|
this.$emit("selectSort", sort);
|
|
|
|
|
},
|
|
|
|
|
selectArticle() {
|
|
|
|
|
this.$emit("selectArticle", this.articleSearch);
|
|
|
|
|
},
|
|
|
|
|
showAdmire() {
|
|
|
|
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "请先登录！",
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.showAdmireDialog = true;
|
|
|
|
|
},
|
|
|
|
|
getAdmire() {
|
|
|
|
|
this.$http.get(this.$constant.baseURL + "/webInfo/getAdmire")
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (!this.$common.isEmpty(res.data)) {
|
|
|
|
|
this.admires = res.data;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: error.message,
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
getRecommendArticles() {
|
|
|
|
|
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (!this.$common.isEmpty(res.data)) {
|
|
|
|
|
this.recommendArticles = res.data.records;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: error.message,
|
|
|
|
|
type: "error"
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
showTip() {
|
|
|
|
|
this.$router.push({path: '/weiYan'});
|
|
|
|
|
},
|
|
|
|
|
openPicture(type) {
|
|
|
|
|
this.pictureType = type;
|
|
|
|
|
this.addPictureDialog = true;
|
|
|
|
|
@ -529,7 +625,7 @@
|
|
|
|
|
submitLove() {
|
|
|
|
|
if (this.userLove.bgCover.trim() === "") {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "你还没设置背景封面呢~",
|
|
|
|
|
message: "你还没设置呢~",
|
|
|
|
|
type: "warning"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
@ -537,7 +633,7 @@
|
|
|
|
|
|
|
|
|
|
if (this.userLove.manCover.trim() === "") {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "你还没设置男生头像呢~",
|
|
|
|
|
message: "你还没设置呢~",
|
|
|
|
|
type: "warning"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
@ -545,7 +641,7 @@
|
|
|
|
|
|
|
|
|
|
if (this.userLove.womanCover.trim() === "") {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "你还没设置女生头像呢~",
|
|
|
|
|
message: "你还没设置呢~",
|
|
|
|
|
type: "warning"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
@ -553,7 +649,7 @@
|
|
|
|
|
|
|
|
|
|
if (this.userLove.manName.trim() === "") {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "你还没写男生昵称呢~",
|
|
|
|
|
message: "你还没写呢~",
|
|
|
|
|
type: "warning"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
@ -561,7 +657,7 @@
|
|
|
|
|
|
|
|
|
|
if (this.userLove.womanName.trim() === "") {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: "你还没写女生昵称呢~",
|
|
|
|
|
message: "你还没写呢~",
|
|
|
|
|
type: "warning"
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
@ -824,6 +920,19 @@
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
|
|
|
|
.ais-SearchBox-input {
|
|
|
|
|
padding: 0 14px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
width: calc(100% - 50px);
|
|
|
|
|
outline: 0;
|
|
|
|
|
border: 2px solid var(--lightGreen);
|
|
|
|
|
border-right: 0;
|
|
|
|
|
border-radius: 40px;
|
|
|
|
|
color: var(--maxGreyFont);
|
|
|
|
|
background: var(--white);
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.love-container {
|
|
|
|
|
background-image: linear-gradient(to right, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px), linear-gradient(to bottom, rgba(37, 82, 110, 0.1) 1px, var(--background) 1px);
|
|
|
|
|
background-size: 3rem 3rem;
|
|
|
|
|
@ -904,7 +1013,10 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.love-time-title1 {
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 3rem;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
letter-spacing: 0.2rem;
|
|
|
|
|
line-height: 4rem;
|
|
|
|
|
|
王岚馨
11 months ago