UIGF-org/UIGF-org.github.io

为 SiteInfo Box 添加一个 Wrap 以标注程序支持的标准版本

Closed this issue · 7 comments

页面:https://uigf.org/zh/partnership.html
方法:https://theme-hope.vuejs.press/zh/config/style.html

<div class="wrap"><span class="wraps">v2.2</span></div>
<style type="text/css">
.wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
font-size: 17px;
font-weight: 400;
color: #fff;
opacity: 0.5;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
-ms-transition: .3s ease all;
-o-transition: .3s ease all;
transition: .3s ease all;
}
.wrap:hover {
opacity: 0.9;
}
.wraps {
display: inline-block;
text-align: center;
width: 200px;
height: 30px;
line-height: 27px;
position: absolute;
top: 30px;
right: -50px;
z-index: 2;
overflow: hidden;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
border: 1px dashed;
box-shadow: 0 0 0 1px #000, 0px 21px 5px -18px rgba(0,0,0,0.6);
background: #3b88d0;
}
</style>

是弄个文本在每个应用的卡片中,标识其所支持的格式版本嘛?

我在本地试了下好像直接改已有的 css 不太行,得再加一层。

emm,那些是SiteInfo组件做成的呀。是说,在那个SiteInfo之后加div,还是在组件本身中加呀?

emm,那些是SiteInfo组件做成的呀。是说,在那个SiteInfo之后加div,还是在组件本身中加呀?

我是感觉在组件中搞会方便点

那好,我在.vuepress/components中弄个全局RelativeProject组件,把这些SiteInfo换了吧……

这个这个!#38