diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index df36fcf..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index 00e80dd..3703b88 100644 --- a/public/index.html +++ b/public/index.html @@ -9,13 +9,10 @@ - - <%= htmlWebpackPlugin.options.title %> + + 红山开源社区竞赛服务系统 -
diff --git a/public/pageLogo.jpg b/public/pageLogo.jpg new file mode 100644 index 0000000..d0159c6 Binary files /dev/null and b/public/pageLogo.jpg differ diff --git a/src/App.vue b/src/App.vue index 2c24fd7..1b2ad68 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,20 +5,33 @@ - diff --git a/src/assets/css/Footer.css b/src/assets/css/Footer.css index bf46028..f729043 100644 --- a/src/assets/css/Footer.css +++ b/src/assets/css/Footer.css @@ -1,7 +1,7 @@ .footer{ position: fixed; bottom: 0; - height:11.3vw; + height: 11.3vw; width: 100%; align-items: center; background-color: #0a1d30; @@ -14,29 +14,26 @@ margin: 3.2vw; } -.logo{ +.osredm-logo{ width: 200px; } .text{ - text-align: center; align-items: center; margin-left: 50px; color: white; font-size: 15px; vertical-align: middle; - } + a:hover{ color: rgb(250, 202, 46); } - a:active{ color: rgb(250, 202, 46); } - a{ - text-decoration:none; + text-decoration: none; color: white; } \ No newline at end of file diff --git a/src/assets/css/Header.css b/src/assets/css/Header.css index b4e8814..99369ac 100644 --- a/src/assets/css/Header.css +++ b/src/assets/css/Header.css @@ -1,15 +1,32 @@ +.container { + width: 100%; + height: auto; + position: relative; +} + +.user-info { + position: absolute; + top: 3vw; + right: 3vw; +} +.user-info-dropdown { + cursor: pointer; +} +img { + width: 3vw; + height: 3vw; + border-radius: 11px; + float: right; +} + .nav{ - text-align: center; display: flex; - /*vertical-align: center;*/ justify-content: center; } .el-menu-item{ font-size: 1.1rem; - } -/deep/ .el-submenu__title{ +::v-deep .el-submenu__title{ font-size: 1.1rem !important; - /*width: 129px !important;*/ } diff --git a/src/assets/icon/demo.css b/src/assets/icon/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/icon/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时,垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/icon/demo_index.html b/src/assets/icon/demo_index.html new file mode 100644 index 0000000..f8ad486 --- /dev/null +++ b/src/assets/icon/demo_index.html @@ -0,0 +1,257 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+ +
+
+
    + +
  • + +
    发送邮件
    +
    &#xe642;
    +
  • + +
  • + +
    电话
    +
    &#xe61f;
    +
  • + +
  • + +
    位置1
    +
    &#xe667;
    +
  • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式,特点是:

+
    +
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • +
  • 默认情况下不支持多色,直接添加多色图标会自动去色。
  • +
+
+

注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)

+
+

Unicode 使用步骤如下:

+

第一步:拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1654000165771') format('woff2'),
+       url('iconfont.woff?t=1654000165771') format('woff'),
+       url('iconfont.ttf?t=1654000165771') format('truetype');
+}
+
+

第二步:定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步:挑选相应图标并获取字体编码,应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 发送邮件 +
    +
    .icon-zqlfasongyoujian +
    +
  • + +
  • + +
    + 电话 +
    +
    .icon-zqldianhuahover +
    +
  • + +
  • + +
    + 位置1 +
    +
    .icon-zqlweizhi1 +
    +
  • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

+

与 Unicode 使用方式相比,具有如下特点:

+
    +
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • +
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 fontclass 代码:

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步:挑选相应图标并获取类名,应用于页面:

+
<span class="iconfont icon-zqlxxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    发送邮件
    +
    #icon-zqlfasongyoujian
    +
  • + +
  • + +
    电话
    +
    #icon-zqldianhuahover
    +
  • + +
  • + +
    位置1
    +
    #icon-zqlweizhi1
    +
  • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:

+
    +
  • 支持多色图标了,不再受单色限制。
  • +
  • 通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
  • +
  • 兼容性较差,支持 IE9+,及现代浏览器。
  • +
  • 浏览器渲染 SVG 的性能一般,还不如 png。
  • +
+

使用步骤如下:

+

第一步:引入项目下面生成的 symbol 代码:

+
<script src="./iconfont.js"></script>
+
+

第二步:加入通用 CSS 代码(引入一次就行):

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步:挑选相应图标并获取类名,应用于页面:

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/icon/iconfont.css b/src/assets/icon/iconfont.css new file mode 100644 index 0000000..f0669cc --- /dev/null +++ b/src/assets/icon/iconfont.css @@ -0,0 +1,27 @@ +@font-face { + font-family: "iconfont"; /* Project id 3442121 */ + src: url('iconfont.woff2?t=1654000165771') format('woff2'), + url('iconfont.woff?t=1654000165771') format('woff'), + url('iconfont.ttf?t=1654000165771') format('truetype'); +} + +[class^="icon-zql"], [class*="icon-zql"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-zqlfasongyoujian:before { + content: "\e642"; +} + +.icon-zqldianhuahover:before { + content: "\e61f"; +} + +.icon-zqlweizhi1:before { + content: "\e667"; +} + diff --git a/src/assets/icon/iconfont.js b/src/assets/icon/iconfont.js new file mode 100644 index 0000000..37cacc3 --- /dev/null +++ b/src/assets/icon/iconfont.js @@ -0,0 +1 @@ +!function(t){var a,h,p,c,d,z='',M=(M=document.getElementsByTagName("script"))[M.length-1].getAttribute("data-injectcss"),C=function(t,a){a.parentNode.insertBefore(t,a)};if(M&&!t.__iconfont__svg__cssinject__){t.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}function e(){d||(d=!0,p())}function n(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(n,50)}e()}a=function(){var t,a=document.createElement("div");a.innerHTML=z,z=null,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(t=document.body).firstChild?C(a,t.firstChild):t.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),a()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(p=a,c=t.document,d=!1,n(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,e())})}(window); \ No newline at end of file diff --git a/src/assets/icon/iconfont.json b/src/assets/icon/iconfont.json new file mode 100644 index 0000000..0f94198 --- /dev/null +++ b/src/assets/icon/iconfont.json @@ -0,0 +1,30 @@ +{ + "id": "3442121", + "name": "icon-zql", + "font_family": "iconfont", + "css_prefix_text": "icon-zql", + "description": "osredm_footer", + "glyphs": [ + { + "icon_id": "863692", + "name": "发送邮件", + "font_class": "fasongyoujian", + "unicode": "e642", + "unicode_decimal": 58946 + }, + { + "icon_id": "880389", + "name": "电话", + "font_class": "dianhuahover", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "16811030", + "name": "位置1", + "font_class": "weizhi1", + "unicode": "e667", + "unicode_decimal": 58983 + } + ] +} diff --git a/src/assets/icon/iconfont.ttf b/src/assets/icon/iconfont.ttf new file mode 100644 index 0000000..b917cb6 Binary files /dev/null and b/src/assets/icon/iconfont.ttf differ diff --git a/src/assets/icon/iconfont.woff b/src/assets/icon/iconfont.woff new file mode 100644 index 0000000..93d2c46 Binary files /dev/null and b/src/assets/icon/iconfont.woff differ diff --git a/src/assets/icon/iconfont.woff2 b/src/assets/icon/iconfont.woff2 new file mode 100644 index 0000000..69556c4 Binary files /dev/null and b/src/assets/icon/iconfont.woff2 differ diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/src/assets/logo.png and /dev/null differ diff --git a/src/assets/banner.jpg b/src/assets/logo/banner.jpg similarity index 100% rename from src/assets/banner.jpg rename to src/assets/logo/banner.jpg diff --git a/src/assets/logo-white.svg b/src/assets/logo/osredmLogo-white.svg similarity index 100% rename from src/assets/logo-white.svg rename to src/assets/logo/osredmLogo-white.svg diff --git a/src/assets/logo.svg b/src/assets/logo/osredmLogo.svg similarity index 100% rename from src/assets/logo.svg rename to src/assets/logo/osredmLogo.svg diff --git a/src/assets/logo/tel.png b/src/assets/logo/tel.png deleted file mode 100644 index 284e87f..0000000 Binary files a/src/assets/logo/tel.png and /dev/null differ diff --git a/src/assets/logo/tel.svg b/src/assets/logo/tel.svg deleted file mode 100644 index 611d8a0..0000000 --- a/src/assets/logo/tel.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/logo/user.jpg b/src/assets/logo/user.jpg new file mode 100644 index 0000000..40645b5 Binary files /dev/null and b/src/assets/logo/user.jpg differ diff --git a/src/components/AdminHeader.vue b/src/components/AdminHeader.vue index 0ce9492..73fd190 100644 --- a/src/components/AdminHeader.vue +++ b/src/components/AdminHeader.vue @@ -2,7 +2,7 @@
- + 配置1 @@ -17,7 +17,7 @@ export default { name: "AdminHeader", data() { return { - logoImg: require("../assets/logo.svg"), + osredmLogo: require("../assets/logo/osredmLogo.svg"), activeIndex: '1', activeIndex2: '1' }; diff --git a/src/components/Footer.vue b/src/components/Footer.vue index 2d7f471..3bbdd73 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -2,10 +2,13 @@