详情页
This commit is contained in:
parent
11cfe766d7
commit
f5178e42ae
@ -4,9 +4,13 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--font-border: rgb(213, 79, 27);
|
||||
--theme-comment-color: rgba(178, 188, 250, 0.4);
|
||||
--theme-bg-color: rgba(16 18 27 / 40%);
|
||||
--theme-bg-color-deep: rgba(16, 18, 27, 0.51);
|
||||
--border-color: rgba(28, 32, 37, 0.25);
|
||||
--theme-color: #f9fafb;
|
||||
--inactive-color: rgb(113 119 144 / 78%);
|
||||
@ -24,8 +28,10 @@
|
||||
}
|
||||
|
||||
.light-mode {
|
||||
--theme-comment-color: rgba(255, 202, 145, 0.4);
|
||||
--font-border: rgb(108, 155, 255);
|
||||
--theme-comment-color: rgba(201, 217, 255, 0.4);
|
||||
--theme-bg-color: rgb(255 255 255 / 31%);
|
||||
--theme-bg-color-deep: rgb(255 255 255 / 51%);
|
||||
--theme-color: #3c3a3a;
|
||||
--inactive-color: #333333;
|
||||
--button-inactive: #3c3a3a;
|
||||
@ -941,6 +947,8 @@ body.light-mode .video-bg:before {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*背景板*/
|
||||
.JustBack{
|
||||
display: flex;
|
||||
|
1
src/assets/img/Like3D.svg
Normal file
1
src/assets/img/Like3D.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703259082706" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1153" data-spm-anchor-id="a313x.collections_detail.0.i8.64c73a81KiqVeN" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M276.448855 311.659434l-89.292663-13.343487 78.76911-35.288561 89.292662 13.327733-78.769109 35.304315zM768.141391 978.124871l132.284842-443.942702 78.76911-35.288561-132.284843 443.926948-78.769109 35.304315zM815.670671 392.240233L588.406036 359.740099l78.76911-35.320069 227.264635 32.515889-78.76911 35.304314z" fill="#a9ddf8" p-id="1154" data-spm-anchor-id="a313x.collections_detail.0.i1.64c73a81KiqVeN" class=""></path><path d="M588.406036 359.740099l7.183743-19.849816 78.76911-35.320068-7.183743 19.849815-78.76911 35.320069zM608.901759 307.201103l78.769109-35.320069-78.769109 35.320069zM603.844782 98.415701l-38.203018-41.022952 78.769109-35.304315 38.203018 41.007198-78.769109 35.320069zM565.641764 57.392749l-1.008245-0.992491 78.76911-35.304315 1.008244 0.992491-78.769109 35.304315zM564.617765 56.400258l78.76911-35.304315-78.76911 35.304315zM120.45451 933.19497V288.359532l78.76911-35.320069v644.835439l-78.76911 35.320068z" fill="#a9ddf8" p-id="1155" data-spm-anchor-id="a313x.collections_detail.0.i13.64c73a81KiqVeN" class=""></path><path d="M120.45451 288.359532L31.508432 275.063306l78.769109-35.304315 88.946079 13.280472-78.76911 35.320069zM31.508432 275.063306l78.769109-35.304315-78.769109 35.304315zM564.617765 56.400258c-21.031352-20.448461-48.222449-25.993806-70.073-16.762067l78.76911-35.320068c21.850551-9.23174 49.041648-3.670641 70.088754 16.77782l-78.76911 35.304315zM734.018612 1017.225857c15.91136-6.34879 28.48291-20.164892 34.122779-39.100986l78.769109-35.304315c-5.639868 18.904586-18.195664 32.736442-34.122778 39.100986l-78.76911 35.320068zM900.426233 534.182169c18.242926-61.25086-24.575962-132.946503-84.755562-141.941936l78.76911-35.304314c60.1796 8.979678 102.998488 80.691076 84.755562 141.941935l-78.76911 35.304315zM595.589779 339.874529c3.654887-10.0982 8.128972-20.574491 13.31198-32.673426l78.769109-35.304315a632.421427 632.421427 0 0 0-13.311979 32.673427l-78.76911 35.304314z" fill="#a9ddf8" p-id="1156" data-spm-anchor-id="a313x.collections_detail.0.i5.64c73a81KiqVeN" class=""></path><path d="M608.901759 307.201103c1.638397-3.843933 3.355564-7.829649 5.119992-12.03592l78.769109-35.304315c-1.764428 4.190517-3.465841 8.191987-5.119992 12.020166l-78.769109 35.320069zM614.021751 295.165183c6.931682-16.399729 14.619547-35.383084 19.960092-54.807547l78.76911-35.288561c-5.356299 19.408709-13.028411 38.392064-19.960093 54.776039l-78.769109 35.320069z" fill="#a9ddf8" p-id="1157" data-spm-anchor-id="a313x.collections_detail.0.i12.64c73a81KiqVeN" class=""></path><path d="M633.981843 240.37339c5.246023-19.062125 9.405032-42.535319 6.254267-67.583896l78.76911-35.288561c3.150764 25.048577-1.008245 48.490264-6.254267 67.552388l-78.76911 35.320069z" fill="#a9ddf8" p-id="1158" data-spm-anchor-id="a313x.collections_detail.0.i11.64c73a81KiqVeN" class=""></path><path d="M640.23611 172.805248a126.014822 126.014822 0 0 0-36.391328-74.389547l78.769109-35.320069a126.014822 126.014822 0 0 1 36.391329 74.389547l-78.76911 35.320069z" fill="#a9ddf8" p-id="1159" data-spm-anchor-id="a313x.collections_detail.0.i10.64c73a81KiqVeN" class=""></path><path d="M564.617765 56.400258c-29.22334-28.388387-70.309307-28.073311-92.443427 0.708922L276.448855 311.659434l-89.292663-13.343487v644.835439l517.418527 77.319758c29.050048 4.348055 54.760285-12.77635 63.566672-42.346273l132.284842-443.942702c18.242926-61.25086-24.575962-132.946503-84.755562-141.941936L588.406036 359.740099l7.183743-19.849816a632.988565 632.988565 0 0 1 13.31198-32.68918c1.638397-3.843933 3.355564-7.829649 5.119992-12.03592 6.931682-16.399729 14.619547-35.383084 19.960092-54.807547 5.246023-19.062125 9.405032-42.503812 6.254267-67.552388a126.014822 126.014822 0 0 0-36.391328-74.389547l-38.203018-41.022952-1.008245-0.992491zM31.508432 275.063306v644.835439l88.946078 13.296225V288.359532L31.508432 275.063306z" fill="#fb9f94" p-id="1160" data-spm-anchor-id="a313x.collections_detail.0.i0.64c73a81KiqVeN" class=""></path></svg>
|
After Width: | Height: | Size: 4.2 KiB |
@ -115,7 +115,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--用户评论-->
|
||||
<div class="JustBack" style="width:670px;display:flex; flex-direction: column; flex-wrap: nowrap;">
|
||||
<div class="JustBack" style="width:670px;height:auto;display:flex; flex-direction: column; flex-wrap: nowrap;">
|
||||
<div style="width:670px;color: var(--theme-color)">
|
||||
<div class="HeadLine" style="margin-top:30px">
|
||||
<div class="HeadSquare"></div>
|
||||
|
@ -19,18 +19,16 @@
|
||||
</el-card>
|
||||
<!--评论-->
|
||||
<el-card style="background-color: var(--theme-comment-color) !important;margin-top:10px">
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: wrap">
|
||||
<span style="font-family: STHupo;font-size:25px;margin-left:-10px;color:var(--theme-color)">评论广场</span>
|
||||
<!--单条评论-->
|
||||
<el-divider></el-divider>
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top:40px">
|
||||
<img class="little-Circle" style="width:50px !important;height:50px !important;margin-top:20px;" src="../../assets/img/beauty.jpg"/>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<div style="display: flex;flex-direction: row;color:var(--theme-color);margin-left:5px;">
|
||||
<span style="font-family: STHupo;width:50px">用户:</span><span style="font-size:13px;margin-left:5px;width:100px">JK少女</span>
|
||||
<span style="font-family: STHupo;margin-left:15px;width:100px">评论时间:</span><span style="font-size:13px;margin-left:2px;width:150px">2023年12月22日</span>
|
||||
<div style="display: flex;flex-direction: row-reverse;width:0%">
|
||||
<el-button type="success" icon="el-icon-thumb" size="small" circle style="margin-top:-7px;"></el-button>
|
||||
</div>
|
||||
<span style="font-family: STHupo;margin-left:15px;width:100px">评论时间:</span><span style="font-size:13px;margin-left:0px;width:150px">2023年12月22日</span>
|
||||
</div>
|
||||
<div class='arrow-box popper border arrow-left'
|
||||
style="background-color: var(--theme-comment-color);margin-left:10px;margin-top:7px;width:430px;border: 3px solid var(--border-color)">
|
||||
@ -38,10 +36,31 @@
|
||||
8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码8~18 位包含大小写字母、数字、特殊字符的密码
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row-reverse;width:100%;">
|
||||
<span style="font-size:18px;font-family: STHupo;line-height:44px;margin-left:5px">112</span>
|
||||
<el-button type="danger" icon="myIcon" size="medium" plain circle style="margin-top:6px;" ></el-button>
|
||||
</div>
|
||||
<!--子评论-->
|
||||
<el-card style="background-color: var(--theme-comment-color) !important;margin-top:50px;margin-left:70px">
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: wrap">
|
||||
<div style="display: flex;flex-direction: row;color:var(--theme-color);margin-left:5px;">
|
||||
<img class="little-Circle" style="width:50px !important;height:50px !important;margin-top:10px;" src="../../assets/img/beauty.jpg"/>
|
||||
<span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:10px">JK少男</span>
|
||||
<span style="font-family: STHupo;width:50px;margin-top:25px;color: rgba(255,78,78,0.5)!important;">回复 </span>
|
||||
<span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:7px">JK少女</span>
|
||||
<span style="font-family: STHupo;width:70px;margin-top:25px;margin-left:7px">:</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: wrap">
|
||||
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
|
||||
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
|
||||
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
|
||||
内容丰富多元,节目持续更新,内容播放清晰流畅,操作界面简单友好,真正为用户带来“悦享品质”的观映体验。
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
@ -153,5 +172,27 @@ $popper-background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .myIcon{
|
||||
background: url("../../assets/img/Like3D.svg")center no-repeat;
|
||||
width:15px;
|
||||
height:15px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
::v-deep .myIcon:before {
|
||||
content: "替";
|
||||
font-size: 17px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .myIcon:before {
|
||||
content: "\e611";
|
||||
}
|
||||
|
||||
::v-deep .el-divider{
|
||||
background-color:var(--theme-color);
|
||||
height:2px
|
||||
}
|
||||
|
||||
</style>
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="main-header">
|
||||
<div class="main-header" style="z-index:999">
|
||||
<a class="menu-link-main" href="#">All Apps</a>
|
||||
<div class="header-menu">
|
||||
<a class="main-header-link is-active" href="#">Desktop</a>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="main-header">
|
||||
<div class="main-header" style="z-index:999">
|
||||
<!-- <a class="menu-link-main" href="#">All Apps</a>-->
|
||||
<div class="header-menu">
|
||||
<router-link class="main-header-link" active-class="is-active" v-for="(item,index) in tabList" v-if="tabList.length>0" :key="item.index" :to="item.path" >{{item.libel}}</router-link>
|
||||
|
@ -58,6 +58,7 @@ export default {
|
||||
|
||||
.min-title {
|
||||
color: var(--theme-color);
|
||||
margin-top:20px;
|
||||
//background-color: var(--theme-bg-color);
|
||||
}
|
||||
</style>
|
@ -1,82 +1,96 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="base-style">
|
||||
<span class="title">基础样式</span>
|
||||
<div class="base-style-content">
|
||||
|
||||
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
|
||||
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
|
||||
<div class="HeadSquare"></div>
|
||||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-open"></i>基础样式</div>
|
||||
</div>
|
||||
<div class="base-style" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600">
|
||||
<div class="base-style-content" >
|
||||
<div class="min-content">
|
||||
<span class="min-title">Logo(浅色模式)</span>
|
||||
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||
</div>
|
||||
<div class="min-content" style="margin-left: 10px">
|
||||
<div class="min-content" style="margin-left: 50px">
|
||||
<span class="min-title">Logo(深色模式)</span>
|
||||
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||
</div>
|
||||
<div class="min-content" style="margin-left: 10px">
|
||||
<div class="min-content" style="margin-left: 50px">
|
||||
<span class="min-title">Favicon</span>
|
||||
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-select">
|
||||
<span class="theme-color-select">主题色:</span>
|
||||
<el-color-picker v-model="color"></el-color-picker>
|
||||
<el-color-picker v-model="color" style="margin-top:10px"></el-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="background-img">
|
||||
<span class="title">背景图</span>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<div class="background-img" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;display: flex;flex-direction: column">
|
||||
<div class="HeadLine" style="margin-top:15px;margin-left:-5px;">
|
||||
<div class="HeadSquare"></div>
|
||||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>背景样式</div>
|
||||
</div>
|
||||
<span class="title" >背景图</span>
|
||||
<div style="display: flex;flex-direction: column;margin-top:20px">
|
||||
<span class="min-title">浅色模式</span>
|
||||
<div class="img-card">
|
||||
<UploadComponent style="margin-left: 20px"></UploadComponent>
|
||||
<div class="img-url">
|
||||
<span class="min-title">图片链接</span>
|
||||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable>
|
||||
clearable
|
||||
style="margin-top:10px;">
|
||||
</el-input>
|
||||
<span class="min-title">支持随机图链接</span>
|
||||
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
|
||||
<div style="display: flex;flex-direction: column;margin-top:20px">
|
||||
<span class="min-title">深色模式</span>
|
||||
<div class="img-card">
|
||||
<UploadComponent style="margin-left: 20px"></UploadComponent>
|
||||
<div class="img-url">
|
||||
<span class="min-title">图片链接</span>
|
||||
<span class="min-title"><i class="el-icon-link"></i>图片链接</span>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable>
|
||||
clearable style="margin-top:10px;">
|
||||
</el-input>
|
||||
<span class="min-title">支持随机图链接</span>
|
||||
<span class="min-title" style="margin-top:20px">支持随机图链接</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-model">
|
||||
<span class="title">UI模式</span>
|
||||
<div class="min-ui-model">
|
||||
<div>
|
||||
<span class="min-title">浅色模式切换:</span>
|
||||
<div class="ui-model" style="margin-top:20px">
|
||||
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
|
||||
<div class="HeadSquare"></div>
|
||||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-promotion"></i>主题偏好设置</div>
|
||||
</div>
|
||||
<div class="min-ui-model" style="font-family: SimHei;font-size:18px;font-weight:600;">
|
||||
<div style="margin-top:50px">
|
||||
<span class="min-title" >浅色模式切换:</span>
|
||||
<el-switch
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
inactive-value="0">
|
||||
inactive-value="0" >
|
||||
</el-switch>
|
||||
</div>
|
||||
<div>
|
||||
<span class="min-title">默认深色:</span>
|
||||
<div style="margin-top:20px">
|
||||
<span class="min-title" style="margin-top:20px">默认深色:</span>
|
||||
<el-switch
|
||||
v-model="value"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
active-value="100"
|
||||
inactive-value="0">
|
||||
inactive-value="0" >
|
||||
</el-switch>
|
||||
</div>
|
||||
<div style="width:100%;height:50px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,6 +140,7 @@ export default {
|
||||
//background-color: var(--theme-bg-color);
|
||||
}
|
||||
.base-style-content{
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
@ -152,11 +167,13 @@ export default {
|
||||
flex-direction: column;
|
||||
}
|
||||
.img-card{
|
||||
border: solid 5px var(--border-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
border-radius: 20px;
|
||||
margin-top:20px;
|
||||
width: 800px;
|
||||
height: 200px;
|
||||
background-color: var(--theme-bg-color);
|
||||
@ -176,4 +193,11 @@ export default {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.el-input__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
.el-textarea__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
</style>
|
@ -149,9 +149,9 @@ export default {
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
font-size: 20px;
|
||||
font-size: 25px;
|
||||
color: var(--theme-color);
|
||||
margin-top: 10px;
|
||||
margin-top: 30px;
|
||||
//background-color: var(--theme-bg-color);
|
||||
}
|
||||
|
||||
|
@ -1,142 +1,192 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="base-info">
|
||||
<span class="title">基础信息</span>
|
||||
<div class="base-info-content">
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">站名:</span>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable
|
||||
style="width: 600px;">
|
||||
</el-input>
|
||||
<div class="main" style="text-shadow: 0 0 20px var(--font-border);">
|
||||
<div class="LeftPart" style="width:70%">
|
||||
<div class="HeadLine" style="margin-top:20px;margin-left:-5px;">
|
||||
<div class="HeadSquare"></div>
|
||||
<div class="TitleFont" style="color:var(--theme-color)"><i class="el-icon-s-order"></i>信息设置</div>
|
||||
</div>
|
||||
<div class="base-info" style="margin-top:20px;font-family: SimHei;font-size:18px;font-weight:600;">
|
||||
<div class="HeadLine" style="margin-top:20px;margin-left:-6px;">
|
||||
<div class="TitleFont" style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-menu"></i>基础信息</div>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">SEO描述:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 600px;">
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">SEO关键词:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 600px;">
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">底部链接(可用作友链):</span>
|
||||
<div v-for="(item, index) in form" :key="index" >
|
||||
<el-form>
|
||||
<el-form-item
|
||||
label="名称"
|
||||
:prop="'dynamicItem.' + index + '.name'"
|
||||
:rules="{
|
||||
<el-card style="background-color: var(--theme-bg-color);border-width: 5px;margin-top:10px;border-color:var(--border-color)">
|
||||
<div class="base-info-content" >
|
||||
<div class="LineInput">
|
||||
<span class="min-title">站名:</span>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable
|
||||
style="width: 400px;margin-top:10px">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="LineInput">
|
||||
<span class="min-title">SEO描述:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 500px;margin-top:10px">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="LineInput">
|
||||
<span class="min-title">SEO关键词:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 500px;margin-top:10px">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="LineInput">
|
||||
<span class="min-title">底部链接(可用作友链):</span>
|
||||
<div v-for="(item, index) in form" :key="index" style="margin-top:10px;">
|
||||
<el-card style="width:500px;height:180px;background-color: var(--theme-bg-color)">
|
||||
<el-form>
|
||||
<el-form-item
|
||||
label="名称"
|
||||
style="color:var(--theme-color)"
|
||||
:prop="'dynamicItem.' + index + '.name'"
|
||||
:rules="{
|
||||
required: true, message: '名称不能为空', trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input style="width: 500px" v-model="item.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="链接"
|
||||
:prop="'dynamicItem.' + index + '.phone'"
|
||||
:rules="[
|
||||
>
|
||||
<el-input style="width: 300px" v-model="item.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="链接"
|
||||
style="color:var(--theme-color)"
|
||||
:prop="'dynamicItem.' + index + '.phone'"
|
||||
:rules="[
|
||||
{required: true, message: 'url不能为空', trigger: 'blur'},
|
||||
]"
|
||||
>
|
||||
<el-input style="width: 500px" v-model="item.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<i class="el-icon-delete" @click="deleteItem(item, index)"></i>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
>
|
||||
<el-input style="width: 300px" v-model="item.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="color:var(--theme-color);">
|
||||
<i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
<el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>
|
||||
</div>
|
||||
<div class="LineInput" style="margin-top:25px!important;">
|
||||
<span class="min-title">底部信息:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 500px;margin-top:10px">
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">版权信息:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 500px;margin-top:10px">
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">备案信息:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 500px;margin-top:10px">
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-button @click="addItem" style="width: 100px;" type="primary">增加</el-button>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">底部信息:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 600px;">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">版权信息:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 600px;">
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">备案信息:</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
style="width: 600px;">
|
||||
</el-input>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="advanced-info">
|
||||
<span class="title">进阶信息</span>
|
||||
<div style="display: flex;flex-direction: column">
|
||||
<span class="min-title">代理网站提示语:</span>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable
|
||||
style="width: 600px;">
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<span class="min-title">社交媒体:</span>
|
||||
<div v-for="(item, index) in form" :key="index" >
|
||||
<el-form>
|
||||
<el-form-item
|
||||
label="名称"
|
||||
:prop="'dynamicItem.' + index + '.name'"
|
||||
:rules="{
|
||||
<div class="advanced-info" style="font-family: SimHei;font-size:18px;font-weight:600;">
|
||||
<div class="HeadLine" style="margin-top:20px;margin-left:-6px;">
|
||||
<div class="TitleFont" style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-s-custom"></i>进阶设置</div>
|
||||
</div>
|
||||
<el-card style="background-color: var(--theme-bg-color);border-width: 5px;margin-top:10px;border-color:var(--border-color)">
|
||||
<div class="LineInput">
|
||||
<span class="min-title">代理网站提示语:</span>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable
|
||||
style="width: 500px;margin-top:10px">
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="LineInput">
|
||||
<span class="min-title">社交媒体:</span>
|
||||
<div v-for="(item, index) in form" :key="index" style="margin-top:10px">
|
||||
<el-card style="width:500px;height:180px;background-color: var(--theme-bg-color)">
|
||||
<el-form >
|
||||
<el-form-item
|
||||
label="名称"
|
||||
:prop="'dynamicItem.' + index + '.name'"
|
||||
:rules="{
|
||||
required: true, message: '名称不能为空', trigger: 'blur'
|
||||
}"
|
||||
>
|
||||
<el-input style="width: 500px" v-model="item.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="链接"
|
||||
:prop="'dynamicItem.' + index + '.phone'"
|
||||
:rules="[
|
||||
>
|
||||
<el-input style="width: 400px" v-model="item.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="链接"
|
||||
:prop="'dynamicItem.' + index + '.phone'"
|
||||
:rules="[
|
||||
{required: true, message: 'url不能为空', trigger: 'blur'},
|
||||
]"
|
||||
>
|
||||
<el-input style="width: 500px" v-model="item.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<i class="el-icon-delete" @click="deleteItem(item, index)"></i>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button @click="addItem" style="width: 100px;" type="primary">增加</el-button>
|
||||
</div>
|
||||
>
|
||||
<el-input style="width: 400px" v-model="item.url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="color:var(--theme-color);">
|
||||
<i class="el-icon-delete" style="font-size:25px" @click="deleteItem(item, index)"></i>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
<el-button @click="addItem" style="width: 100px;margin-top:20px" plain round type="primary">增加</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="RightPart" >
|
||||
<div class="HeadLine" style="margin-top:20px;margin-left:-6px;position: fixed">
|
||||
<div class="TitleFont" style="font-size:20px!important;color:var(--theme-color)"><i class="el-icon-message-solid"></i>小贴士</div>
|
||||
</div>
|
||||
<el-card style="width:380px;height:300px;margin-left:10px;margin-top:50px;position: fixed;
|
||||
background-color: var(--theme-bg-color-deep);border-color:var(--border-color);
|
||||
border-width: 5px">
|
||||
<div class="HeadLine" style="margin-top:5px;margin-left:-5px;">
|
||||
<div class="HeadSquare"></div>
|
||||
<div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-s-opportunity"></i>什么是SEO?</div>
|
||||
</div>
|
||||
<div style="height:15px;width:100%"></div>
|
||||
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
|
||||
SEO 代表搜寻引擎最佳化/搜寻引擎优化,
|
||||
是指透过了解搜寻引擎的自然排名运作原理来优化网站,以提高目标网站在有关搜寻引擎内排名的方式。
|
||||
而我们认为SEO 是一种透过了解搜寻引擎的运作及使用者的搜寻习惯来优化网站,以提高随机搜寻排名,
|
||||
从而提高网站流量,最终达致网站的销售或宣传能力的技术。
|
||||
</span>
|
||||
<div class="HeadLine" style="margin-top:5px;margin-left:-5px;">
|
||||
<div class="HeadSquare"></div>
|
||||
<div class="TitleFont" style="color:var(--theme-color);font-size:20px!important;"><i class="el-icon-s-opportunity"></i>SEO的重要性</div>
|
||||
<span style="font-family: SimHei;font-size:18px;font-weight:600;line-height:25px;">
|
||||
SEO 至关重要,不仅因为它吸引了很多网站访客,
|
||||
而且如果使用得当,还可以帮助您提高投资回报率。通过创建在搜寻引擎结果中排名靠前的网站,
|
||||
这是一种高效益高回报的方法,可以改善您的网站以获得更多的浏览量,产生随机回报。
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -177,7 +227,7 @@ export default {
|
||||
<style scoped>
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
//align-items: center; margin-left: 50px; overflow: scroll;
|
||||
margin-left: 50px;
|
||||
@ -203,12 +253,37 @@ export default {
|
||||
}
|
||||
|
||||
.base-info-content {
|
||||
margin-top:20px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.min-title {
|
||||
margin-top:10px;
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.RightPart{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width:50%;
|
||||
}
|
||||
.LineInput{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label{
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.el-input__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
.el-textarea__inner{
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
</style>
|
@ -14,6 +14,7 @@
|
||||
action=""
|
||||
list-type="picture-card"
|
||||
:file-list="fileList"
|
||||
style="z-index:-999"
|
||||
></el-upload>
|
||||
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user