删除顶部的tab
This commit is contained in:
A1300399510
parent
7e4169a74e
commit
c1be38d400
@ -33,37 +33,11 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.tab-box {
|
|
||||||
width: 490px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
.tab-box .tab {
|
|
||||||
width: 150px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
.tab-box .tab .item {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: 20px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.tab-box .tab .item.pitch {
|
|
||||||
background-color: #f7a60a;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.operate {
|
.operate {
|
||||||
width: 490px;
|
width: 490px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.operate input {
|
.operate input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -82,6 +56,9 @@
|
|||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.operate .btn.disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
.main {
|
.main {
|
||||||
width: 450px;
|
width: 450px;
|
||||||
padding: 20px 0 0;
|
padding: 20px 0 0;
|
||||||
@ -452,6 +429,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
.pop-up .select {
|
.pop-up .select {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
@ -471,6 +449,7 @@
|
|||||||
width: 400px;
|
width: 400px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
user-select: all;
|
||||||
}
|
}
|
||||||
.pop-up .select .img-box .img {
|
.pop-up .select .img-box .img {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
|||||||
@ -39,41 +39,12 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.tab-box {
|
|
||||||
width: 490px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
width: 150px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 20px;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
flex: 1;
|
|
||||||
border-radius: 20px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&.pitch {
|
|
||||||
background-color: #f7a60a;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.operate {
|
.operate {
|
||||||
width: 490px;
|
width: 490px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin-top: 10px;
|
||||||
input {
|
input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@ -91,6 +62,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
&.disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.main {
|
.main {
|
||||||
@ -527,6 +501,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
user-select: none;
|
||||||
.select {
|
.select {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
@ -544,6 +519,7 @@
|
|||||||
width: 400px;
|
width: 400px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
user-select: all;
|
||||||
.img {
|
.img {
|
||||||
// width: 400px;
|
// width: 400px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
|||||||
25
index.html
25
index.html
@ -12,17 +12,10 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="tab-box">
|
|
||||||
<div class="tab">
|
|
||||||
<div class="item" :class="{'pitch': tab == 'offer'}" @click="cutTab('offer')">Offer</div>
|
|
||||||
<div class="item" :class="{'pitch': tab == 'summary'}" @click="cutTab('summary')">总结</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="operate flexacenter">
|
<div class="operate flexacenter">
|
||||||
<input placeholder="请输入" v-model="inputText" @keyup.enter="confirm()" />
|
<input placeholder="请输入" v-model="inputText" @keyup.enter="confirm()" />
|
||||||
<div class="btn" @click="confirm()">确定</div>
|
<div class="btn" @click="confirm()">确定</div>
|
||||||
<div class="btn" @click="saveimage()">生成图片</div>
|
<div class="btn" :class="{ disabled: !isClickable }" :disabled="!isClickable" @click="saveimage()">生成图片</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<template v-if="tab == 'offer' && JSON.stringify(offerinfo) !== '{}'">
|
<template v-if="tab == 'offer' && JSON.stringify(offerinfo) !== '{}'">
|
||||||
@ -458,6 +451,11 @@
|
|||||||
this.arrowyellow = arrowyellow
|
this.arrowyellow = arrowyellow
|
||||||
this.arrowsgray = arrowsgray
|
this.arrowsgray = arrowsgray
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
isClickable() {
|
||||||
|
return JSON.stringify(this.offerinfo) !== '{}' || JSON.stringify(this.info) !== '{}'
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getBase64ImageFromURL(type, index) {
|
getBase64ImageFromURL(type, index) {
|
||||||
if (type == "offer") {
|
if (type == "offer") {
|
||||||
@ -721,18 +719,13 @@
|
|||||||
this.personalBgGraduate = personalBgGraduate
|
this.personalBgGraduate = personalBgGraduate
|
||||||
},
|
},
|
||||||
|
|
||||||
// 切换类型
|
|
||||||
cutTab(key) {
|
|
||||||
this.offerinfo = {}
|
|
||||||
this.info = {}
|
|
||||||
if (key == this.tab) return
|
|
||||||
this.tab = key
|
|
||||||
},
|
|
||||||
|
|
||||||
// 确定
|
// 确定
|
||||||
confirm() {
|
confirm() {
|
||||||
if (!this.inputText) return
|
if (!this.inputText) return
|
||||||
|
|
||||||
|
if (this.inputText.indexOf("/details/") > 0) this.tab = "offer"
|
||||||
|
else this.tab = "summary"
|
||||||
|
|
||||||
if (this.inputText.indexOf("http") != -1) this.inputId = this.inputText.substring(this.inputText.lastIndexOf("/") + 1)
|
if (this.inputText.indexOf("http") != -1) this.inputId = this.inputText.substring(this.inputText.lastIndexOf("/") + 1)
|
||||||
else this.inputId = this.inputText
|
else this.inputId = this.inputText
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user