Merge pull request #268 from jamebal/search

style: 优化移动端视频播放器关闭按钮的位置
This commit is contained in:
jmal 2024-09-02 18:00:25 +08:00 committed by GitHub
commit 0afecfe0e3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 14 deletions

View File

@ -296,9 +296,10 @@ export default {
.close-bar { .close-bar {
z-index: 2006; z-index: 2006;
position: relative; position: relative;
top: -25px; top: -30px;
right: -25px; right: -30px;
float: right; float: right;
font-size: 18px;
color: #fff0f0; color: #fff0f0;
background: #d4d4d475; background: #d4d4d475;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #69696975; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #69696975;
@ -309,15 +310,27 @@ export default {
border-color: #fff0f0; border-color: #fff0f0;
} }
.audio-player-close { }
transform: rotate(315deg);
z-index: 2009;
position: absolute;
font-size: 18px;
top: -8px;
right: 13px;
}
@media screen and (max-width: 768px) {
.block {
.close-bar {
z-index: 2006;
position: relative;
top: 0;
right: 0;
font-size: 18px;
float: right;
color: #fff0f0;
background: #d4d4d475;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #69696975;
}
.close-bar:hover {
cursor: pointer;
border-color: #fff0f0;
}
}
} }
.wrapper { .wrapper {

View File

@ -29,17 +29,17 @@
<span class="instruction">给您的网站取一个响亮的名字。</span> <span class="instruction">给您的网站取一个响亮的名字。</span>
<div class="config-itme-label">站点地址:</div> <div class="config-itme-label">站点地址:</div>
<el-input autosize type="textarea" width="100%" v-model="form.siteUrl"></el-input> <el-input autosize type="textarea" width="100%" v-model="form.siteUrl"></el-input>
<span class="instruction">在这里填入站点的地址或域名。例如:<a href="https://blog.jmal.top" target="_blank">https://blog.jmal.top</a></span> <span class="instruction">在这里填入站点的地址或域名</span>
<div class="config-itme-label">站点背景大图:</div><upload-image-input v-model="form.backgroundSite"/> <div class="config-itme-label">站点背景大图:</div><upload-image-input v-model="form.backgroundSite"/>
<span class="instruction">在这里填入图片的URL地址, 以在网站首页显示一个背景大图。</span> <span class="instruction">在这里填入图片的URL地址, 以在网站首页显示一个背景大图。</span>
<div class="config-itme-label">首页大图内文字: <div class="config-itme-label">首页大图内文字:
<el-button type="text" @click="heartwings">历史记录</el-button> <el-button type="text" @click="heartwings">历史记录</el-button>
</div> </div>
<el-input autosize type="textarea" v-model="form.backgroundTextSite"></el-input> <el-input autosize type="textarea" v-model="form.backgroundTextSite"></el-input>
<span class="instruction">显示在博客首页大图内的描述。</span> <span class="instruction">显示在博客首页大图内的主要文字。</span>
<div class="config-itme-label">首页大图内描述:</div> <div class="config-itme-label">首页大图内描述:</div>
<el-input autosize type="textarea" v-model="form.backgroundDescSite"></el-input> <el-input autosize type="textarea" v-model="form.backgroundDescSite"></el-input>
<span class="instruction">显示在博客首页大图内的描述。</span> <span class="instruction">显示在博客首页大图内的次要文字。</span>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="导航栏" name="2"> <el-tab-pane label="导航栏" name="2">
<div class="config-itme-label">导航栏顶部 - 网站 Logo:</div> <div class="config-itme-label">导航栏顶部 - 网站 Logo:</div>
@ -53,7 +53,7 @@
<a href="https://fontawesome.com/icons?d=gallery" target="_blank">Font-awesome</a> <a href="https://fontawesome.com/icons?d=gallery" target="_blank">Font-awesome</a>
图标标签和链接,使用':'隔开(标签里的内容为该图标的简述)。 图标标签和链接,使用':'隔开(标签里的内容为该图标的简述)。
<br> <br>
列如:{{ example }}:https://github.com/jamebal (建议不超过5项) 列如:{{ example }}:https://github.com/jamebal/jmal-cloud-view (建议不超过5项)
</span> </span>
<div> <div>
<el-divider content-position="center">预览</el-divider> <el-divider content-position="center">预览</el-divider>