hookehuyr

fix 海报页图片生成样式调整,上传图片大小控制取消

1 <template> 1 <template>
2 <div class="poster-page"> 2 <div class="poster-page">
3 <div class="poster-contain-wrapper"> 3 <div class="poster-contain-wrapper">
4 - <div v-if="flag" ref="canvasRef" class="poster-contain"> 4 + <div v-if="flag" ref="canvasRef" class="poster-contain" style="border: 1px solid #4e4e4e; ">
5 <div class="poster-text-boxer"> 5 <div class="poster-text-boxer">
6 <div class="poster-text"> 6 <div class="poster-text">
7 <span class="name">{{ tree_data?.name }}</span> 7 <span class="name">{{ tree_data?.name }}</span>
...@@ -163,10 +163,10 @@ const beforeRead = (file) => { ...@@ -163,10 +163,10 @@ const beforeRead = (file) => {
163 return false; 163 return false;
164 } 164 }
165 165
166 - if (file.size > 1000 * 1024) { 166 + // if (file.size > 1000 * 1024) {
167 - showToast('图片大小超过1M'); 167 + // showToast('图片大小超过1M');
168 - return false; 168 + // return false;
169 - } 169 + // }
170 170
171 return true; 171 return true;
172 }; 172 };
...@@ -210,7 +210,7 @@ const afterRead = async (res) => { ...@@ -210,7 +210,7 @@ const afterRead = async (res) => {
210 <style lang="less" scoped> 210 <style lang="less" scoped>
211 .poster-page { 211 .poster-page {
212 height: 100vh; 212 height: 100vh;
213 - background-color: green; 213 + background-color: #DCD8D2;
214 .poster-contain-wrapper { 214 .poster-contain-wrapper {
215 height: calc(83vh - 2rem); 215 height: calc(83vh - 2rem);
216 padding: 1rem; 216 padding: 1rem;
...@@ -231,11 +231,19 @@ const afterRead = async (res) => { ...@@ -231,11 +231,19 @@ const afterRead = async (res) => {
231 font-size: 2.5rem; 231 font-size: 2.5rem;
232 font-weight: bolder; 232 font-weight: bolder;
233 letter-spacing: 5px; 233 letter-spacing: 5px;
234 + text-shadow:
235 + -1px -1px 0 #1F6D4E,
236 + 1px -1px 0 #1F6D4E,
237 + -1px 1px 0 #1F6D4E,
238 + 1px 1px 0 #1F6D4E;
234 } 239 }
235 .nickname { 240 .nickname {
236 position: absolute; 241 position: absolute;
237 - bottom: -1rem; 242 + top: 0.5rem;
238 letter-spacing: 5px; 243 letter-spacing: 5px;
244 + color: #1F6D4E;
245 + background-color: #FFCE0B;
246 + padding: 0.25rem;
239 } 247 }
240 } 248 }
241 } 249 }
...@@ -244,7 +252,7 @@ const afterRead = async (res) => { ...@@ -244,7 +252,7 @@ const afterRead = async (res) => {
244 height: 70vh; 252 height: 70vh;
245 } 253 }
246 .poster-mission { 254 .poster-mission {
247 - color: #CCCCCC; 255 + color: #363636;
248 margin-top: 1rem; 256 margin-top: 1rem;
249 } 257 }
250 } 258 }
...@@ -254,7 +262,7 @@ const afterRead = async (res) => { ...@@ -254,7 +262,7 @@ const afterRead = async (res) => {
254 text-align: center; 262 text-align: center;
255 margin-top: 2rem; 263 margin-top: 2rem;
256 margin-bottom: 1rem; 264 margin-bottom: 1rem;
257 - color: #fff; 265 + color: #797572;
258 font-size: 0.9rem; 266 font-size: 0.9rem;
259 } 267 }
260 .poster-control { 268 .poster-control {
......