的
This commit is contained in:
A1300399510
commit
546c52aab6
755
css/1.css
Normal file
755
css/1.css
Normal file
@ -0,0 +1,755 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
[v-cloak] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
/* iOS Safari */
|
||||||
|
-webkit-user-select: none;
|
||||||
|
/* Chrome/Safari/Opera */
|
||||||
|
-khtml-user-select: none;
|
||||||
|
/* Konqueror */
|
||||||
|
-moz-user-select: none;
|
||||||
|
/* Firefox */
|
||||||
|
-ms-user-select: none;
|
||||||
|
/* Internet Explorer/Edge */
|
||||||
|
user-select: none;
|
||||||
|
/* Non-prefixed version, currently
|
||||||
|
|
||||||
|
not supported by any browser */
|
||||||
|
}
|
||||||
|
#loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
width: 80px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.loading span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: lightgreen;
|
||||||
|
-webkit-animation: load 1s ease infinite;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes load {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
height: 40px;
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
height: 70px;
|
||||||
|
margin: -15px 0;
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading span:nth-child(2) {
|
||||||
|
-webkit-animation-delay: 0.2s;
|
||||||
|
}
|
||||||
|
.loading span:nth-child(3) {
|
||||||
|
-webkit-animation-delay: 0.4s;
|
||||||
|
}
|
||||||
|
.loading span:nth-child(4) {
|
||||||
|
-webkit-animation-delay: 0.6s;
|
||||||
|
}
|
||||||
|
.loading span:nth-child(5) {
|
||||||
|
-webkit-animation-delay: 0.8s;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #f1f1f1;
|
||||||
|
font-family: "microsoft yahei", "San Francisco", '微软雅黑', 'tahoma', 'arial', 'simsun', '宋体';
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.inner {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 98vw;
|
||||||
|
min-width: 1100px;
|
||||||
|
}
|
||||||
|
.page-header {
|
||||||
|
background: #0170fe;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 98vw;
|
||||||
|
min-width: 1100px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .line {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 16px;
|
||||||
|
width: 30px;
|
||||||
|
height: 2px;
|
||||||
|
background: #fff;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
color: rgba(255, 255, 255, 0.702);
|
||||||
|
font-size: 13px;
|
||||||
|
list-style: none;
|
||||||
|
padding: 16px 0 ;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list .item {
|
||||||
|
margin-left: 30px;
|
||||||
|
display: inline-flex;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list .item a {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 9px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list .item:hover,
|
||||||
|
.page-header .nav-tab .url-list .active {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list .user {
|
||||||
|
margin-left: 40px;
|
||||||
|
display: inline-flex;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list .user img {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list .user i {
|
||||||
|
display: block;
|
||||||
|
background: url(../img/helloofficer-user.png) no-repeat;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .url-list .user:hover .quit {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .quit {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -40px;
|
||||||
|
left: calc(50% - 22px);
|
||||||
|
z-index: 10;
|
||||||
|
text-align: center;
|
||||||
|
width: 45px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #02d7b5;
|
||||||
|
color: #233160;
|
||||||
|
font-size: 13px;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
/* iOS Safari */
|
||||||
|
-webkit-user-select: none;
|
||||||
|
/* Chrome/Safari/Opera */
|
||||||
|
-khtml-user-select: none;
|
||||||
|
/* Konqueror */
|
||||||
|
-moz-user-select: none;
|
||||||
|
/* Firefox */
|
||||||
|
-ms-user-select: none;
|
||||||
|
/* Internet Explorer/Edge */
|
||||||
|
user-select: none;
|
||||||
|
/* Non-prefixed version, currently
|
||||||
|
|
||||||
|
not supported by any browser */
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .quit:after {
|
||||||
|
position: absolute;
|
||||||
|
left: calc(50% - 4px);
|
||||||
|
top: -8px;
|
||||||
|
content: "";
|
||||||
|
border: 4px solid transparent;
|
||||||
|
border-bottom-color: #02d7b5;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .quit:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background: transparent;
|
||||||
|
left: -20px;
|
||||||
|
top: -30px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .quit:active {
|
||||||
|
background: #09b6a4;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .quit:active:after {
|
||||||
|
border-bottom-color: #09b6a4;
|
||||||
|
}
|
||||||
|
.page-header .nav-tab .language {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.page-header .logo {
|
||||||
|
display: block;
|
||||||
|
background: url(../img/helloofficer-logo.png) no-repeat;
|
||||||
|
width: 178px;
|
||||||
|
height: 46px;
|
||||||
|
background-size: 178px 46px;
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 98vw;
|
||||||
|
min-width: 1100px;
|
||||||
|
position: relative;
|
||||||
|
top: -17px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.el-custom-select {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.el-custom-select .show-text {
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.102);
|
||||||
|
width: 80px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.el-custom-select .show-text .arrow {
|
||||||
|
margin-left: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 4px solid transparent;
|
||||||
|
border-top-color: #a4ccff;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.el-custom-select .option-list {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
left: 0;
|
||||||
|
top: 0px;
|
||||||
|
border: 1px rgba(255, 255, 255, 0.102) solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 80px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.102);
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(255, 255, 255, 0.302);
|
||||||
|
list-style: none;
|
||||||
|
transition: all 0.3s;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.el-custom-select .option-list .option-item {
|
||||||
|
line-height: 29px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.el-custom-select .option-list .active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-custom-select .option-list.show {
|
||||||
|
top: 31px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.intro-container {
|
||||||
|
background: url(../img/helloofficer-bg.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border-bottom: 5px solid #0170fe;
|
||||||
|
height: 565px;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 14px;
|
||||||
|
}
|
||||||
|
.intro-container .container {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 98vw;
|
||||||
|
min-width: 1100px;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-container {
|
||||||
|
margin: 0 auto 0px;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-container .swiper-pagination {
|
||||||
|
bottom: 15px;
|
||||||
|
}
|
||||||
|
.intro-container .intro-text {
|
||||||
|
margin: 0 auto 64px;
|
||||||
|
width: 700px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.intro-container .intro-text .yellow {
|
||||||
|
color: #e6b300;
|
||||||
|
font-size: 18px;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.intro-container .intro-text .text {
|
||||||
|
display: inline;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.intro-container .intro-text .l {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 32px;
|
||||||
|
height: 27px;
|
||||||
|
background: url(../img/helloofficer-ql.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.intro-container .intro-text .r {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 32px;
|
||||||
|
height: 27px;
|
||||||
|
background: url(../img/helloofficer-qr.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-slide {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
/* Center slide text vertically */
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 300ms;
|
||||||
|
transform: scale(0.6);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-slide a:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
.intro-container .swiper-slide-active,
|
||||||
|
.intro-container .swiper-slide-duplicate-active {
|
||||||
|
transform: scale(1);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-slide-active img,
|
||||||
|
.intro-container .swiper-slide-duplicate-active img {
|
||||||
|
width: 740px;
|
||||||
|
height: 270px;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-slide-active a:after,
|
||||||
|
.intro-container .swiper-slide-duplicate-active a:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-button-next:after,
|
||||||
|
.intro-container .swiper-button-prev:after {
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-button-next {
|
||||||
|
right: 0;
|
||||||
|
border: 2px rgba(255, 255, 255, 0.2) solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAoklEQVQokZ2ROwrCUBBFT4LLsdQ2rfa2biCCnRIbGwsLa9cjGFBSuBEXEEuPTQKP5wM/AwMzcJh7ZwZ1r9bqRCWVmdoAA+AJrICaKHLgGNQHoIihfmSp3rq8quNQLtReBuBFHaUg1CoAz+qwNx6qZ8AGmHV9C5Qx1C+wA6Zdf8/fNklEDGVAFUxpgfVXxn86weLTMecB0KjF3w8+AQ9gmwIAXuBOCgjMsl3AAAAAAElFTkSuQmCC) no-repeat center;
|
||||||
|
background-size: 9px 16px;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-button-prev {
|
||||||
|
left: 0;
|
||||||
|
border: 2px rgba(255, 255, 255, 0.2) solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAn0lEQVQokY3SOwoCMRCA4T+Ld/AOYqmtrV5FwXJZRPAAYmHhVQRbQa28jp3422RhfAQ2MMWQDzKPJJXCmQJr4JIKaALsgAp4VgWwzQDggBpjrN7Ue465SgQj9RrAsr1rwVA9B9DEF1AHX2ClpoiSegT6ucgTsAFesZN/3f2cCqiBR85nQAOkD9W18M4jKA1z0XZXWksv5/tOCy4hCF/lDZ6V8agJLeFBAAAAAElFTkSuQmCC) no-repeat center;
|
||||||
|
background-size: 9px 16px;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-button-next:hover,
|
||||||
|
.intro-container .swiper-button-prev:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.intro-container .swiper-pagination-bullet-active {
|
||||||
|
background: #ccc;
|
||||||
|
}
|
||||||
|
.intro-container img {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
.intro-container a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.intro-container .tab-container {
|
||||||
|
display: block;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0px;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.intro-container .tab-container .tab-item {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
width: 220px;
|
||||||
|
height: 64px;
|
||||||
|
line-height: 64px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
margin-right: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.intro-container .tab-container .tab-item:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.intro-container .tab-container .active {
|
||||||
|
background: #0170fe !important;
|
||||||
|
}
|
||||||
|
.page-footer {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 2;
|
||||||
|
text-align: center;
|
||||||
|
height: 135px;
|
||||||
|
background: #2d3038;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.page-footer span {
|
||||||
|
margin: 0 26px;
|
||||||
|
}
|
||||||
|
.main-container {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 98vw;
|
||||||
|
min-width: 1100px;
|
||||||
|
padding: 44px 0 80px;
|
||||||
|
font-size: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.main-container .start {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-flex;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
width: calc(100% - 414px);
|
||||||
|
}
|
||||||
|
.main-container .start .title {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
width: 162px;
|
||||||
|
height: 48px;
|
||||||
|
background: url(../img/helloofficer-start.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.main-container .start .list .item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
.main-container .start .list .school {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.main-container .start .list .school .avatar {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 44px;
|
||||||
|
max-height: 44px;
|
||||||
|
}
|
||||||
|
.main-container .start .list .school .logo {
|
||||||
|
margin-right: 14px;
|
||||||
|
display: inline-flex;
|
||||||
|
border: 1px #ededed solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
flex: 0 0 54px;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.main-container .start .list .school .name {
|
||||||
|
font-size: 23px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.main-container .start .list .intro {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.main-container .start .list .intro .text {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% - 264px);
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 25px;
|
||||||
|
word-break: break-all;
|
||||||
|
padding-bottom: 22px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.main-container .start .list .intro .text .t {
|
||||||
|
text-overflow: -o-ellipsis-lastline;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.main-container .start .list .intro .text .open-more {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
padding: 0 4px 0 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.main-container .start .list .intro .textl {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.main-container .start .list .intro .image {
|
||||||
|
margin-left: 84px;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 180px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.main-container .start .list .time {
|
||||||
|
margin-top: -5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: "DIN";
|
||||||
|
color: #000000;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
.main-container .start .list .time .yellow {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e6b200;
|
||||||
|
line-height: 20px;
|
||||||
|
display: inline;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.main-container .start .list .lesson {
|
||||||
|
margin-top: 26px;
|
||||||
|
}
|
||||||
|
.main-container .start .list .lesson .lesson-item {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 30px 4px 25px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: rgba(1, 112, 254, 0.059);
|
||||||
|
min-height: 46px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.main-container .start .list .lesson .lesson-item .icon {
|
||||||
|
transition: all 0.8s;
|
||||||
|
display: inline-flex;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #0170fe url(../img/arrow-white.png) no-repeat center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
width: 36px;
|
||||||
|
flex: 0 0 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
.main-container .start .list .lesson .lesson-item:hover {
|
||||||
|
background-color: #0170fe;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.main-container .start .list .lesson .lesson-item:hover .icon {
|
||||||
|
background: #fff url(../img/arrow-blue.png) no-repeat center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
}
|
||||||
|
.main-container .review {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 384px;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.main-container .review .title {
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
width: 164px;
|
||||||
|
height: 48px;
|
||||||
|
background: url(../img/helloofficer-review.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.main-container .review .time-tab {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color: #e5e5e5;
|
||||||
|
width: 385px;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0 6px;
|
||||||
|
border-radius: 25px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.main-container .review .time-tab .tab-item {
|
||||||
|
display: inline-flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #999999;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 21px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.main-container .review .time-tab .tab-item:hover {
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.main-container .review .time-tab .active {
|
||||||
|
color: #f1f1f1 !important;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 82px;
|
||||||
|
border-radius: 21px;
|
||||||
|
background-color: #2d3038;
|
||||||
|
}
|
||||||
|
.main-container .review .time-tab .backblack {
|
||||||
|
background: #2d3038;
|
||||||
|
z-index: 5;
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
top: 4px;
|
||||||
|
height: 42px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-radius: 21px;
|
||||||
|
}
|
||||||
|
.main-container .review .item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
.main-container .review .item .school {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 30px;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.main-container .review .item .school .avatar {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 28px;
|
||||||
|
max-height: 28px;
|
||||||
|
}
|
||||||
|
.main-container .review .item .school .logo {
|
||||||
|
margin-right: 8px;
|
||||||
|
display: inline-flex;
|
||||||
|
border: 1px #ededed solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
flex: 0 0 34px;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.main-container .review .item .school .name {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.main-container .review .item .contents {
|
||||||
|
padding: 26px 30px 20px;
|
||||||
|
}
|
||||||
|
.main-container .review .item .type {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.main-container .review .item .type .yellow {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 6px;
|
||||||
|
color: #e6b200;
|
||||||
|
}
|
||||||
|
.main-container .review .item .link-list {
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
.main-container .review .item .link-list .i {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 30px;
|
||||||
|
background: url(../img/arrow-black.png) no-repeat left center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 1.4;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
.main-container .review .item .link-list .i:hover {
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
background: url(../img/arrow-yellow.png) no-repeat left center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
}
|
||||||
|
.to-top-btn {
|
||||||
|
position: fixed;
|
||||||
|
right: 37px;
|
||||||
|
bottom: 156px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
background: url(../img/zsj-top.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
777
css/1.less
Normal file
777
css/1.less
Normal file
@ -0,0 +1,777 @@
|
|||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
[v-cloak]{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.noselect {
|
||||||
|
|
||||||
|
-webkit-touch-callout: none; /* iOS Safari */
|
||||||
|
|
||||||
|
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||||
|
|
||||||
|
-khtml-user-select: none; /* Konqueror */
|
||||||
|
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
|
||||||
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||||
|
|
||||||
|
user-select: none; /* Non-prefixed version, currently
|
||||||
|
|
||||||
|
not supported by any browser */
|
||||||
|
|
||||||
|
}
|
||||||
|
#loading{
|
||||||
|
text-align: center;
|
||||||
|
padding: 100px 0;
|
||||||
|
}
|
||||||
|
.loading{
|
||||||
|
width: 80px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.loading span{
|
||||||
|
display: inline-block;
|
||||||
|
width: 8px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: lightgreen;
|
||||||
|
-webkit-animation: load 1s ease infinite;
|
||||||
|
}
|
||||||
|
@-webkit-keyframes load{
|
||||||
|
0%,100%{
|
||||||
|
height: 40px;
|
||||||
|
background: lightgreen;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
height: 70px;
|
||||||
|
margin: -15px 0;
|
||||||
|
background: lightblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loading span:nth-child(2){
|
||||||
|
-webkit-animation-delay:0.2s;
|
||||||
|
}
|
||||||
|
.loading span:nth-child(3){
|
||||||
|
-webkit-animation-delay:0.4s;
|
||||||
|
}
|
||||||
|
.loading span:nth-child(4){
|
||||||
|
-webkit-animation-delay:0.6s;
|
||||||
|
}
|
||||||
|
.loading span:nth-child(5){
|
||||||
|
-webkit-animation-delay:0.8s;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background: #f1f1f1;
|
||||||
|
font-family: "microsoft yahei", "San Francisco", '微软雅黑', 'tahoma', 'arial', 'simsun', '宋体';
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.inner{
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 98vw;
|
||||||
|
min-width: 1100px;
|
||||||
|
}
|
||||||
|
.page-header{
|
||||||
|
background: #0170fe;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
.nav-tab{
|
||||||
|
.inner;
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:flex-end;
|
||||||
|
position: relative;
|
||||||
|
.line{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 16px;
|
||||||
|
width: 30px;
|
||||||
|
height: 2px;
|
||||||
|
background: #fff;
|
||||||
|
transition:all 0.2s;
|
||||||
|
}
|
||||||
|
.url-list{
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:flex-end;
|
||||||
|
color:rgba(255, 255, 255, 0.702);
|
||||||
|
font-size: 13px;
|
||||||
|
list-style: none;
|
||||||
|
padding: 16px 0 ;
|
||||||
|
|
||||||
|
.item{
|
||||||
|
margin-left: 30px;
|
||||||
|
display: inline-flex;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
a{
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 9px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:hover,.active{
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
// .item:after{
|
||||||
|
// content: '';
|
||||||
|
// position: absolute;
|
||||||
|
// bottom: 0;
|
||||||
|
// left: 100%;
|
||||||
|
// width: 0;
|
||||||
|
// height: 2px;
|
||||||
|
// background-color: #fff;
|
||||||
|
// transition: all 0.3s ease-out;
|
||||||
|
|
||||||
|
// }
|
||||||
|
// .item:hover +.item:after {
|
||||||
|
// width: 100%;
|
||||||
|
// left: 0;
|
||||||
|
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
.user{
|
||||||
|
margin-left: 40px;
|
||||||
|
display: inline-flex;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
// border:1px solid #ccc;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #ccc;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
img{
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow:hidden;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
display: block;
|
||||||
|
background: url(../img/helloofficer-user.png) no-repeat;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.user:hover .quit{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.quit{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -40px;
|
||||||
|
left: calc(~'50% - 22px');
|
||||||
|
z-index: 10;
|
||||||
|
text-align: center;
|
||||||
|
width: 45px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #02d7b5;
|
||||||
|
color: #233160;
|
||||||
|
font-size: 13px;
|
||||||
|
.noselect;
|
||||||
|
}
|
||||||
|
.quit:after{
|
||||||
|
position: absolute;
|
||||||
|
left: calc(~'50% - 4px');
|
||||||
|
top: -8px;
|
||||||
|
content: "";
|
||||||
|
border:4px solid transparent;
|
||||||
|
border-bottom-color: #02d7b5;
|
||||||
|
}
|
||||||
|
.quit:before{
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background: transparent;
|
||||||
|
left: -20px;
|
||||||
|
top: -30px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.quit:active{
|
||||||
|
background: #09b6a4;
|
||||||
|
}
|
||||||
|
.quit:active:after{
|
||||||
|
border-bottom-color: #09b6a4;
|
||||||
|
}
|
||||||
|
.language{
|
||||||
|
display: inline-flex;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.logo{
|
||||||
|
display: block;
|
||||||
|
background: url(../img/helloofficer-logo.png) no-repeat;
|
||||||
|
width: 178px;
|
||||||
|
height: 46px;
|
||||||
|
background-size: 178px 46px;
|
||||||
|
.inner;
|
||||||
|
position: relative;
|
||||||
|
top: -17px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-custom-select{
|
||||||
|
position: relative;
|
||||||
|
.show-text{
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: rgba(255, 255, 255,0.102);
|
||||||
|
width: 80px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
.arrow{
|
||||||
|
margin-left: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border:4px solid transparent;
|
||||||
|
border-top-color: #a4ccff;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.option-list{
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
left: 0;
|
||||||
|
top: 0px;
|
||||||
|
border: 1px rgba(255, 255, 255,0.102) solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 80px;
|
||||||
|
background-color: rgba(255, 255, 255,0.102);
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(255, 255, 255, 0.302);
|
||||||
|
list-style: none;
|
||||||
|
transition:all 0.3s;
|
||||||
|
z-index: 100;
|
||||||
|
.option-item{
|
||||||
|
line-height: 29px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.option-list.show{
|
||||||
|
top: 31px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-container{
|
||||||
|
background: url(../img/helloofficer-bg.png) no-repeat center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border-bottom: 5px solid #0170fe;
|
||||||
|
height: 565px;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 14px;
|
||||||
|
.container{
|
||||||
|
margin: 0 auto;
|
||||||
|
.inner;
|
||||||
|
}
|
||||||
|
.swiper-container{
|
||||||
|
margin: 0 auto 0px;
|
||||||
|
padding: 20px 0;
|
||||||
|
// overflow: visible;
|
||||||
|
.swiper-pagination{
|
||||||
|
bottom: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.intro-text{
|
||||||
|
margin: 0 auto 64px;
|
||||||
|
width: 700px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
align-items:flex-start;
|
||||||
|
justify-content:space-between;
|
||||||
|
.yellow{
|
||||||
|
color: #e6b300;
|
||||||
|
font-size: 18px;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.text{
|
||||||
|
display: inline;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.l{
|
||||||
|
display: inline-flex;
|
||||||
|
width: 32px;
|
||||||
|
height: 27px;
|
||||||
|
background: url(../img/helloofficer-ql.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.r{
|
||||||
|
display: inline-flex;
|
||||||
|
width: 32px;
|
||||||
|
height: 27px;
|
||||||
|
background: url(../img/helloofficer-qr.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
// background: #fff;
|
||||||
|
|
||||||
|
/* Center slide text vertically */
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
-webkit-justify-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: 300ms;
|
||||||
|
transform: scale(0.6);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.swiper-slide a:after{
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0,0,0,0.4)
|
||||||
|
}
|
||||||
|
.swiper-slide-active,.swiper-slide-duplicate-active{
|
||||||
|
transform: scale(1);
|
||||||
|
z-index: 100;
|
||||||
|
img{
|
||||||
|
width: 740px;
|
||||||
|
height: 270px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-slide-active a:after,.swiper-slide-duplicate-active a:after{
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
.swiper-button-next:after,.swiper-button-prev:after{
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
.swiper-button-next{
|
||||||
|
right: 0;
|
||||||
|
border: 2px rgba(255, 255, 255,0.2) solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAoklEQVQokZ2ROwrCUBBFT4LLsdQ2rfa2biCCnRIbGwsLa9cjGFBSuBEXEEuPTQKP5wM/AwMzcJh7ZwZ1r9bqRCWVmdoAA+AJrICaKHLgGNQHoIihfmSp3rq8quNQLtReBuBFHaUg1CoAz+qwNx6qZ8AGmHV9C5Qx1C+wA6Zdf8/fNklEDGVAFUxpgfVXxn86weLTMecB0KjF3w8+AQ9gmwIAXuBOCgjMsl3AAAAAAElFTkSuQmCC) no-repeat center;
|
||||||
|
background-size: 9px 16px;
|
||||||
|
}
|
||||||
|
.swiper-button-prev{
|
||||||
|
left: 0;
|
||||||
|
border: 2px rgba(255, 255, 255,0.2) solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAn0lEQVQokY3SOwoCMRCA4T+Ld/AOYqmtrV5FwXJZRPAAYmHhVQRbQa28jp3422RhfAQ2MMWQDzKPJJXCmQJr4JIKaALsgAp4VgWwzQDggBpjrN7Ue465SgQj9RrAsr1rwVA9B9DEF1AHX2ClpoiSegT6ucgTsAFesZN/3f2cCqiBR85nQAOkD9W18M4jKA1z0XZXWksv5/tOCy4hCF/lDZ6V8agJLeFBAAAAAElFTkSuQmCC) no-repeat center;
|
||||||
|
background-size: 9px 16px;
|
||||||
|
}
|
||||||
|
.swiper-button-next:hover,.swiper-button-prev:hover{
|
||||||
|
background-color: rgba(0,0,0,0.2);
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
.swiper-pagination-bullet-active{
|
||||||
|
background: #ccc
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.tab-container{
|
||||||
|
display: block;
|
||||||
|
align-items:center;
|
||||||
|
font-size: 0px;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
.tab-item{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 20px;
|
||||||
|
background: rgba(255, 255, 255,0.2);
|
||||||
|
width: 220px;
|
||||||
|
height: 64px;
|
||||||
|
line-height: 64px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px 10px 0 0;
|
||||||
|
margin-right: 1px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tab-item:hover{
|
||||||
|
background: rgba(255, 255, 255,0.1);
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background: #0170fe !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page-footer{
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
line-height: 2;
|
||||||
|
text-align: center;
|
||||||
|
height: 135px;
|
||||||
|
background: #2d3038;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
span{
|
||||||
|
margin: 0 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.main-container{
|
||||||
|
.inner;
|
||||||
|
padding: 44px 0 80px;
|
||||||
|
font-size: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
display: flex;
|
||||||
|
.start{
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-flex;
|
||||||
|
flex:1;
|
||||||
|
flex-direction: column;
|
||||||
|
width: calc(~'100% - 414px');
|
||||||
|
.title{
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
width: 162px;
|
||||||
|
height: 48px;
|
||||||
|
background: url(../img/helloofficer-start.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.list{
|
||||||
|
.item{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 20px 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
.school{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.avatar{
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 44px;
|
||||||
|
max-height: 44px;
|
||||||
|
}
|
||||||
|
.logo{
|
||||||
|
margin-right: 14px;
|
||||||
|
display: inline-flex;
|
||||||
|
border: 1px rgb(237, 237, 237) solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 54px;
|
||||||
|
height: 54px;
|
||||||
|
flex:0 0 54px;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
font-size: 23px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intro{
|
||||||
|
display: block;
|
||||||
|
.text{
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(~'100% - 264px');
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
line-height: 25px;
|
||||||
|
word-break:break-all;
|
||||||
|
padding-bottom: 22px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
.t{
|
||||||
|
text-overflow: -o-ellipsis-lastline;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
.open-more{
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
padding: 0 4px 0 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
// background: linear-gradient(90deg, transparent,#fff, #fff);
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.textl{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.image{
|
||||||
|
margin-left: 84px;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 180px;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.time{
|
||||||
|
margin-top: -5px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: "DIN";
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
line-height: 20px;
|
||||||
|
.yellow{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e6b200;
|
||||||
|
line-height: 20px;
|
||||||
|
display: inline;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lesson{
|
||||||
|
margin-top: 26px;
|
||||||
|
.lesson-item{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
align-items:center;
|
||||||
|
padding: 4px 30px 4px 25px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: rgba(1, 112, 254,0.059);
|
||||||
|
min-height: 46px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:all 0.3s;
|
||||||
|
.icon{
|
||||||
|
transition:all 0.8s;
|
||||||
|
display: inline-flex;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgb(1, 112, 254) url(../img/arrow-white.png) no-repeat center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
width: 36px;
|
||||||
|
flex:0 0 36px;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lesson-item:hover{
|
||||||
|
background-color: #0170fe;
|
||||||
|
font-size: 16px;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-weight: bold;
|
||||||
|
.icon{
|
||||||
|
background: #fff url(../img/arrow-blue.png) no-repeat center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.review{
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 384px;
|
||||||
|
margin-left: 30px;
|
||||||
|
.title{
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
width: 164px;
|
||||||
|
height: 48px;
|
||||||
|
background: url(../img/helloofficer-review.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.time-tab{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color: rgb(229, 229, 229);
|
||||||
|
width: 385px;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0 6px;
|
||||||
|
border-radius: 25px;
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
position: relative;
|
||||||
|
.tab-item{
|
||||||
|
display: inline-flex;
|
||||||
|
flex:1;
|
||||||
|
align-items:center;
|
||||||
|
justify-content:center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
cursor: pointer;
|
||||||
|
transition:all 0.3s;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 21px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.tab-item:hover{
|
||||||
|
color: #333;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
color: rgb(241, 241, 241) !important;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 82px;
|
||||||
|
border-radius: 21px;
|
||||||
|
background-color: rgb(45, 48, 56);
|
||||||
|
}
|
||||||
|
.backblack{
|
||||||
|
background: rgb(45, 48, 56);
|
||||||
|
z-index: 5;
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
top: 4px;
|
||||||
|
height: 42px;
|
||||||
|
transition:all 0.2s;
|
||||||
|
border-radius: 21px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list{
|
||||||
|
|
||||||
|
}
|
||||||
|
.item{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
|
||||||
|
.school{
|
||||||
|
display: flex;
|
||||||
|
align-items:center;
|
||||||
|
padding: 10px 30px;
|
||||||
|
border-bottom:1px solid #ededed;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.avatar{
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
max-width: 28px;
|
||||||
|
max-height: 28px;
|
||||||
|
}
|
||||||
|
.logo{
|
||||||
|
margin-right: 8px;
|
||||||
|
display: inline-flex;
|
||||||
|
border: 1px #ededed solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
flex: 0 0 34px;
|
||||||
|
overflow: hidden;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
font-size: 18px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contents{
|
||||||
|
padding: 26px 30px 20px;
|
||||||
|
}
|
||||||
|
.type{
|
||||||
|
// margin-bottom: 24px;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 14px;
|
||||||
|
.yellow{
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 6px;
|
||||||
|
color: #e6b200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-list{
|
||||||
|
padding-bottom: 6px;
|
||||||
|
.i{
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 30px;
|
||||||
|
background: url(../img/arrow-black.png) no-repeat left center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
line-height: 1.4;
|
||||||
|
transition:all 0.3s;
|
||||||
|
}
|
||||||
|
.i:hover{
|
||||||
|
color: rgba(51, 51, 51, 0.8);
|
||||||
|
background: url(../img/arrow-yellow.png) no-repeat left center;
|
||||||
|
background-size: 15px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.to-top-btn{
|
||||||
|
position: fixed;
|
||||||
|
right: 37px;
|
||||||
|
bottom: 156px;
|
||||||
|
background-size: 100%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border:none;
|
||||||
|
background:url(../img/zsj-top.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
1407
css/index.css
Normal file
1407
css/index.css
Normal file
File diff suppressed because it is too large
Load Diff
1777
css/index.less
Normal file
1777
css/index.less
Normal file
File diff suppressed because it is too large
Load Diff
6
img/QRCode-icon.svg
Normal file
6
img/QRCode-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1195 -1486 )">
|
||||||
|
<path d="M 2.90909090909091 11.6363636363636 L 4.36363636363636 11.6363636363636 L 4.36363636363636 13.0909090909091 L 2.90909090909091 13.0909090909091 L 2.90909090909091 11.6363636363636 Z M 2.90909090909091 2.90909090909091 L 4.36363636363636 2.90909090909091 L 4.36363636363636 4.36363636363636 L 2.90909090909091 4.36363636363636 L 2.90909090909091 2.90909090909091 Z M 11.6363636363636 2.90909090909091 L 13.0909090909091 2.90909090909091 L 13.0909090909091 4.36363636363636 L 11.6363636363636 4.36363636363636 L 11.6363636363636 2.90909090909091 Z M 1.45454545454545 10.1818181818182 L 1.45454545454545 14.5340909090909 L 5.81818181818182 14.5340909090909 L 5.81818181818182 10.1818181818182 L 1.45454545454545 10.1818181818182 Z M 1.45454545454545 1.45454545454546 L 1.45454545454545 5.81818181818182 L 5.81818181818182 5.81818181818182 L 5.81818181818182 1.45454545454546 L 1.45454545454545 1.45454545454546 Z M 10.1818181818182 1.45454545454546 L 10.1818181818182 5.81818181818182 L 14.5454545454545 5.81818181818182 L 14.5454545454545 1.45454545454546 L 10.1818181818182 1.45454545454546 Z M 0 8.72727272727273 L 7.27272727272727 8.72727272727273 L 7.27272727272727 16 L 0 16 L 0 8.72727272727273 Z M 11.6363636363636 14.5454545454545 L 13.0909090909091 14.5454545454545 L 13.0909090909091 16 L 11.6363636363636 16 L 11.6363636363636 14.5454545454545 Z M 14.5454545454545 14.5454545454545 L 16 14.5454545454545 L 16 16 L 14.5454545454545 16 L 14.5454545454545 14.5454545454545 Z M 14.5454545454545 8.72727272727273 L 16 8.72727272727273 L 16 13.0909090909091 L 11.6363636363636 13.0909090909091 L 11.6363636363636 11.6363636363636 L 10.1818181818182 11.6363636363636 L 10.1818181818182 16 L 8.72727272727273 16 L 8.72727272727273 8.72727272727273 L 13.0909090909091 8.72727272727273 L 13.0909090909091 10.1818181818182 L 14.5454545454545 10.1818181818182 L 14.5454545454545 8.72727272727273 Z M 0 0 L 7.27272727272727 0 L 7.27272727272727 7.27272727272727 L 0 7.27272727272727 L 0 0 Z M 8.72727272727273 0 L 16 0 L 16 7.27272727272727 L 8.72727272727273 7.27272727272727 L 8.72727272727273 0 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1195 1486 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/add-icon.svg
Normal file
6
img/add-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1460 -88 )">
|
||||||
|
<path d="M 10.91015625 7.99348958333333 C 11.0256076388889 7.87803819444444 11.0833333333333 7.74131944444444 11.0833333333333 7.58333333333333 L 11.0833333333333 6.41666666666667 C 11.0833333333333 6.25868055555555 11.0256076388889 6.12196180555555 10.91015625 6.00651041666667 C 10.7947048611111 5.89105902777778 10.6579861111111 5.83333333333333 10.5 5.83333333333333 L 8.16666666666667 5.83333333333333 L 8.16666666666667 3.5 C 8.16666666666667 3.34201388888889 8.10894097222222 3.20529513888889 7.99348958333333 3.08984375 C 7.87803819444445 2.97439236111111 7.74131944444445 2.91666666666667 7.58333333333333 2.91666666666667 L 6.41666666666667 2.91666666666667 C 6.25868055555556 2.91666666666667 6.12196180555556 2.97439236111111 6.00651041666667 3.08984375 C 5.89105902777778 3.20529513888889 5.83333333333333 3.34201388888889 5.83333333333333 3.5 L 5.83333333333333 5.83333333333333 L 3.5 5.83333333333333 C 3.34201388888889 5.83333333333333 3.20529513888889 5.89105902777778 3.08984375 6.00651041666667 C 2.97439236111111 6.12196180555555 2.91666666666667 6.25868055555555 2.91666666666667 6.41666666666667 L 2.91666666666667 7.58333333333333 C 2.91666666666667 7.74131944444444 2.97439236111111 7.87803819444444 3.08984375 7.99348958333333 C 3.20529513888889 8.10894097222222 3.34201388888889 8.16666666666667 3.5 8.16666666666667 L 5.83333333333333 8.16666666666667 L 5.83333333333333 10.5 C 5.83333333333333 10.6579861111111 5.89105902777778 10.7947048611111 6.00651041666667 10.91015625 C 6.12196180555556 11.0256076388889 6.25868055555556 11.0833333333333 6.41666666666667 11.0833333333333 L 7.58333333333333 11.0833333333333 C 7.74131944444445 11.0833333333333 7.87803819444445 11.0256076388889 7.99348958333333 10.91015625 C 8.10894097222222 10.7947048611111 8.16666666666667 10.6579861111111 8.16666666666667 10.5 L 8.16666666666667 8.16666666666667 L 10.5 8.16666666666667 C 10.6579861111111 8.16666666666667 10.7947048611111 8.10894097222222 10.91015625 7.99348958333333 Z M 13.0611979166667 3.486328125 C 13.6870659722222 4.55881076388889 14 5.73003472222222 14 7 C 14 8.26996527777778 13.6870659722222 9.44118923611111 13.0611979166667 10.513671875 C 12.4353298611111 11.5861545138889 11.5861545138889 12.4353298611111 10.513671875 13.0611979166667 C 9.44118923611111 13.6870659722222 8.26996527777778 14 7 14 C 5.73003472222222 14 4.55881076388889 13.6870659722222 3.486328125 13.0611979166667 C 2.41384548611111 12.4353298611111 1.56467013888889 11.5861545138889 0.938802083333333 10.513671875 C 0.312934027777778 9.44118923611111 0 8.26996527777778 0 7 C 0 5.73003472222222 0.312934027777778 4.55881076388889 0.938802083333333 3.486328125 C 1.56467013888889 2.41384548611111 2.41384548611111 1.56467013888889 3.486328125 0.938802083333333 C 4.55881076388889 0.312934027777777 5.73003472222222 0 7 0 C 8.26996527777778 0 9.44118923611111 0.312934027777777 10.513671875 0.938802083333333 C 11.5861545138889 1.56467013888889 12.4353298611111 2.41384548611111 13.0611979166667 3.486328125 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1460 88 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/arrow-circular-gray.png
Normal file
BIN
img/arrow-circular-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
6
img/arrows-icon.svg
Normal file
6
img/arrows-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -33 -8 )">
|
||||||
|
<path d="M 7.91983967935872 0.515463917525773 C 7.97327989311957 0.572737686139747 8 0.638602520045818 8 0.713058419243986 C 8 0.787514318442153 7.97327989311957 0.853379152348224 7.91983967935872 0.910652920962199 L 4.18436873747495 4.91408934707904 C 4.1309285237141 4.97136311569301 4.06947227788911 5 4 5 C 3.93052772211089 5 3.86907147628591 4.97136311569301 3.81563126252505 4.91408934707904 L 0.0801603206412826 0.910652920962199 C 0.0267201068804276 0.853379152348224 0 0.787514318442153 0 0.713058419243986 C 0 0.638602520045818 0.0267201068804276 0.572737686139747 0.0801603206412826 0.515463917525773 L 0.480961923847695 0.0859106529209624 C 0.534402137608551 0.0286368843069867 0.595858383433534 0 0.665330661322645 0 C 0.734802939211757 0 0.79625918503674 0.0286368843069867 0.849699398797595 0.0859106529209624 L 4 3.46219931271478 L 7.1503006012024 0.0859106529209624 C 7.20374081496326 0.0286368843069867 7.26519706078824 0 7.33466933867735 0 C 7.40414161656647 0 7.46559786239145 0.0286368843069867 7.51903807615231 0.0859106529209624 L 7.91983967935872 0.515463917525773 Z " fill-rule="nonzero" fill="#aaaaaa" stroke="none" transform="matrix(1 0 0 1 33 8 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
7
img/close-icon.svg
Normal file
7
img/close-icon.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1540 -229 )">
|
||||||
|
<path d="M 1550 229 C 1555.6 229 1560 233.4 1560 239 C 1560 244.6 1555.6 249 1550 249 C 1544.4 249 1540 244.6 1540 239 C 1540 233.4 1544.4 229 1550 229 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0" />
|
||||||
|
<path d="M 1550 229.5 C 1555.32 229.5 1559.5 233.68 1559.5 239 C 1559.5 244.32 1555.32 248.5 1550 248.5 C 1544.68 248.5 1540.5 244.32 1540.5 239 C 1540.5 233.68 1544.68 229.5 1550 229.5 Z " stroke-width="1" stroke="#797979" fill="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
img/collect-icon-colours.svg
Normal file
6
img/collect-icon-colours.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="15px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1406 -827 )">
|
||||||
|
<path d="M 15.4615384615385 5.37807183364839 C 15.8205128205128 5.43478260869565 16 5.57971014492754 16 5.81285444234405 C 16 5.95148078134846 15.9166666666667 6.10270951480781 15.75 6.26654064272212 L 12.2596153846154 9.6124763705104 L 13.0865384615385 14.3383742911153 C 13.0929487179487 14.3824826717076 13.0961538461538 14.4454946439824 13.0961538461538 14.5274102079395 C 13.0961538461538 14.6597353497164 13.0625 14.7715816005041 12.9951923076923 14.8629489603025 C 12.9278846153846 14.9543163201008 12.8301282051282 15 12.7019230769231 15 C 12.5801282051282 15 12.4519230769231 14.9621928166352 12.3173076923077 14.8865784499055 L 8 12.65595463138 L 3.68269230769231 14.8865784499055 C 3.54166666666667 14.9621928166352 3.41346153846154 15 3.29807692307692 15 C 3.16346153846154 15 3.0625 14.9543163201008 2.99519230769231 14.8629489603025 C 2.92788461538462 14.7715816005041 2.89423076923077 14.6597353497164 2.89423076923077 14.5274102079395 C 2.89423076923077 14.4896030245747 2.90064102564103 14.4265910522999 2.91346153846154 14.3383742911153 L 3.74038461538462 9.6124763705104 L 0.240384615384615 6.26654064272212 C 0.0801282051282051 6.09640831758034 0 5.94517958412098 0 5.81285444234405 C 0 5.57971014492754 0.179487179487179 5.43478260869565 0.538461538461538 5.37807183364839 L 5.36538461538461 4.68809073724008 L 7.52884615384615 0.387523629489602 C 7.65064102564103 0.1291745431632 7.80769230769231 0 8 0 C 8.19230769230769 0 8.34935897435897 0.1291745431632 8.47115384615385 0.387523629489602 L 10.6346153846154 4.68809073724008 L 15.4615384615385 5.37807183364839 Z " fill-rule="nonzero" fill="#fa6b11" stroke="none" transform="matrix(1 0 0 1 1406 827 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/collect-icon.png
Normal file
BIN
img/collect-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
11
img/comment-icon-gray.svg
Normal file
11
img/comment-icon-gray.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="13px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter571">
|
||||||
|
<feColorMatrix type="matrix" values="1 0 0 0 0.4 0 1 0 0 0.4 0 0 1 0 0.4 0 0 0 1 0 " in="SourceGraphic" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -1740 -5324 )">
|
||||||
|
<image preserveAspectRatio="none" style="overflow:visible" width="14" height="13" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA4CAYAAABNGP5yAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAOAAAAACP8+m+AAADhUlEQVRoBe2aS4hPURzHZ7zfj4USmTGTkGcodiRRNh5JNsooO7NhgyJSyoayIDbySFlYkLLwyAaRR5Ty2DCTJPIYeYfx+U5z9O/M+f/N/zf3/q//vfdX3+4959zze3zP6557T01NxqU2EP8M8prAPDAaVLN8x/lWcBEcA+9AURlCyVHwG7SnEG3EtAEERcHfAmkM3I9pd4iBUxkJ3pGxwpGgOWAuUOv7cpuM60DjqFplOI4vA2O8AJ6TngB+Kf8QcMy46zbyQhOknq82GYbDV4GLzV0Xu0AeeoV3XUGKrg3E4k/uOxVfL+AvdWIrbfKMgF54QdUrLQL6ewXfvHRakp+8QHorLQIyLTkBmW5+gs98D+jTwx4wivpDe6jDr/6WDL23V0SsBDTi3XkwJSYvr6B3Ofgck/6/aq1DQG+KcQUv5xaB9bqJW6wEdLxExOzc+Jj1d6i3EvCkAs49qoAN8yqwB+cugx8xOPkFnSfBiRh0d1FpnQRfoUm7Kb1OarcVpbyPUtm/dFkJcHq1n66ow85wVFfrHBCV/cT15AQk3gQJO5D3gIQbIHHzme8B1mVQxK0DC8GABJuxFdsHgb75mcRKQDPWDpgsRl9pNSonAdO3TOsQWBJ9HGaNddQ070ytBMSxBzAzQEVT68uglYDj1NWPhv9BbuLEY6sj1jngHAZngwVgoNV4BPVa0HEWmBvDSoB8f9AJ3VetWIdA1QbsO54T4DOStXTeA7LW4n68eQ+AkXaPlb5eOi1Jv7E73h2U+caLcJqXTkNSh6UavEBeu/QZbtQLHPSld74rTMl1X0F8Ls41iq0WrAIioVC+ktgPLgH/aEnhc1Hda3OlP0E/y1SoHqweW2zY1lO2FqwEhfKRRB1oU6Z+buhMoGMmqatOq80E3ZURPHgfWPzd7huZTIbmAouyKOvoUOYO0J09yiajv/r1HtQ/nYKnRqVRkiBdd8BUUEo2Uliu3dPUKbl7HcQDm4G1a5XrUKnn9ZFjK9AQDclgMq+BUjpUJj0XwFLQRTQJFhMdfRkLZChOGYdyzdKNRYzoHHMTCH30kP9a3kaCkHwgswWUO7mGdMWap265t9PRUItqVdoCivUGitIhswjjHgiRoLwbQF+AUy39iG4X0IoQIuIl+XEPS0wkL3rB0QfPEAlzknevMh5ozGu913E5R4R6gFarTMlEoj0MjgC9tEUmfwCaJfF0KbQc/QAAAABJRU5ErkJggg==" x="1740px" y="5324px" filter="url(#filter571)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/comment-icon.png
Normal file
BIN
img/comment-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
img/cross-circle-icon.png
Normal file
BIN
img/cross-circle-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/cross-icon.png
Normal file
BIN
img/cross-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
6
img/delete-icon.svg
Normal file
6
img/delete-icon.svg
Normal file
File diff suppressed because one or more lines are too long
7
img/dot-gray.svg
Normal file
7
img/dot-gray.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -963 -6237 )">
|
||||||
|
<path d="M 967 6238 C 968.68 6238 970 6239.32 970 6241 C 970 6242.68 968.68 6244 967 6244 C 965.32 6244 964 6242.68 964 6241 C 964 6239.32 965.32 6238 967 6238 Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" />
|
||||||
|
<path d="M 967 6238 C 968.68 6238 970 6239.32 970 6241 C 970 6242.68 968.68 6244 967 6244 C 965.32 6244 964 6242.68 964 6241 C 964 6239.32 965.32 6238 967 6238 Z " stroke-width="2" stroke="#aaaaaa" fill="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
7
img/dot-yellow.svg
Normal file
7
img/dot-yellow.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -924 -6237 )">
|
||||||
|
<path d="M 928 6238 C 929.68 6238 931 6239.32 931 6241 C 931 6242.68 929.68 6244 928 6244 C 926.32 6244 925 6242.68 925 6241 C 925 6239.32 926.32 6238 928 6238 Z " fill-rule="nonzero" fill="#fddf6d" stroke="none" />
|
||||||
|
<path d="M 928 6238 C 929.68 6238 931 6239.32 931 6241 C 931 6242.68 929.68 6244 928 6244 C 926.32 6244 925 6242.68 925 6241 C 925 6239.32 926.32 6238 928 6238 Z " stroke-width="2" stroke="#aaaaaa" fill="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
7
img/dot.svg
Normal file
7
img/dot.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="6px" height="6px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g>
|
||||||
|
<path d="M 3 0 C 4.68 0 6 1.32 6 3 C 6 4.68 4.68 6 3 6 C 1.32 6 0 4.68 0 3 C 0 1.32 1.32 0 3 0 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
|
||||||
|
<path d="M 3 0.5 C 4.4 0.5 5.5 1.6 5.5 3 C 5.5 4.4 4.4 5.5 3 5.5 C 1.6 5.5 0.5 4.4 0.5 3 C 0.5 1.6 1.6 0.5 3 0.5 Z " stroke-width="1" stroke="#797979" fill="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
11
img/edit-icon-white.svg
Normal file
11
img/edit-icon-white.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter597">
|
||||||
|
<feColorMatrix type="matrix" values="1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 1 0 " in="SourceGraphic" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -692 -2442 )">
|
||||||
|
<image preserveAspectRatio="none" style="overflow:visible" width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMKADAAQAAAABAAAAMAAAAADbN2wMAAAECklEQVRoBe1YS2tTQRTOowmND1wYEl26Cc2jWVhXBUvEqlDqMq2KCzdaf4ArcSEIWlB3LkTpqq0IAQVRd2pUbFwY+kif2bRQKDTGhViTJsbE76QzdW7M497k5uaCGbg9Z+bOPef7zpyZnozB0G7tCPzfETC2mr7f73fk8/mbhUJhw+Px3AmFQr+VYGopAQb+DQD7GOiQ3W6/EA6Hc3JJmOVOVHteGfDkwptKpdxYiedra2t5OT5NciapPcfn8zmRNu9gl0c+I/gIJpPJ8WAwKCu4siYJxhtWKfLId0obLzP2E3LAaDTGIM+wMR9IyFoJTQmUSRsCPzg/Px9OJBIRp9P5QyAhK500I1ANPIu6gUg4HI4t9E+zsZokNCEgB3y9JJpOQAn4ekg0lQCdNtiwdNrwDbtlMpkGYrHYBw6WSyLa19e3vbi4WKAxlk5ZqCfZHEqnDMY/sn5RNO0YJfDw8BaPhzksgp+bm5MAoHder/c8jtX15eXlMTaXiwgUIsGbgytcdnBFTakUPI7Qcfg341nnOGAjAP0VHisbm83lcreYvitULyXK5HwKaTS4sLBAqSRpADmEgUk8FMgxHKdXIPOwcRwr8hr6PjzUZrPZbH88Hk/udP/+VZWA1uCJhmoEWgFeNQKtAq8KgVaCb5hAq8E3REAP4OsmoBfwdRHQE3jFBPQGXhEBPYInAlR/1GxdXV0HUa+8x0ReVf5EfwD/+mlM0iqVByjYTmAilQd72QczqG36V1ZWvkkMKOzIKubMZvNt2OVVJUqbwlmA/6ckrgYehF/Cxh6Grwge1WdD4MmWnHLaBOfDzDEJdI1XA4GAhDzA+/HuCZ4OvH8MgpehFwsz9F9A5+CpMDulBnjYrE0AwOjq4wBNFtoQbg0mRRJYlRSAbkI+wA+WEcwtYN/IrioF24rUmsVcd3f3CEA9ZFZXIY8IHibcbvelcteBlPMg1JS0EfzXXgGA7+UfANAN6Nd4H/Li0tKSZCXoHUUec8W0mVEzbQT/tQlgskgggty+jzGRxDDSaYKnU5m0KW7Ycj9GRCD16lVTyOVy2a1WawLGad4mwB/ijrA1iMRd3od8itV6xCLPf0mpdtoIfiRq1VPIYrFQ9DnJKfFLkLmH/nVh7BzA05WhZuDJt+QoFMBwdTd9MEA3BMXW09NjSafTRxHxNEBvYpBuIKhxsk2P/I47BQQAdj9OllF82JvJZI7hfsfGjZRIzcCTXx6xEgwGA0UZQL/jRSWgkm9AMI6BZ52dnaPRaJS+06RVTCGkiKtKlNMA/AXvI7j++ISNHpmenv6qCeISJxUJ2Gy21e3t7Thy3IVnA99NEVjURZ+xuRHk6K8SW/rrUhrhP+1h/SFrI2pHoB2BdgT0EoE/XD0Yrfi3Ps4AAAAASUVORK5CYII=" x="692px" y="2442px" filter="url(#filter597)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/edit-icon.png
Normal file
BIN
img/edit-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
11
img/empty-icon.svg
Normal file
11
img/empty-icon.svg
Normal file
File diff suppressed because one or more lines are too long
BIN
img/give-sweep.png
Normal file
BIN
img/give-sweep.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 751 B |
BIN
img/input-icon.png
Normal file
BIN
img/input-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
22
img/issue-bj.svg
Normal file
22
img/issue-bj.svg
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="727px" height="526px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<mask fill="white" id="clip598">
|
||||||
|
<path d="M 1 510 L 0.999871317552845 19.7966825002877 C 3.4185524978235 21.8045610459778 6.54626184609054 23 10 23 C 17.84 23 24 16.8399999999999 24 9 C 24 5.54542319048073 22.8039804094246 2.41703354202741 20.7929431454809 0 L 711 0 C 716.6 0 721 4.40000000000009 721 10 L 721 510 C 721 515.6 716.6 520 711 520 L 11 520 C 5.39999999999998 520 1 515.6 1 510 Z " fill-rule="evenodd" />
|
||||||
|
</mask>
|
||||||
|
<filter x="1126px" y="8991px" width="727px" height="526px" filterUnits="userSpaceOnUse" id="filter599">
|
||||||
|
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
|
||||||
|
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||||
|
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.117647058823529 0 " in="shadowComposite" />
|
||||||
|
</filter>
|
||||||
|
<g id="widget600">
|
||||||
|
<path d="M 1 510 L 0.999871317552845 19.7966825002877 C 3.4185524978235 21.8045610459778 6.54626184609054 23 10 23 C 17.84 23 24 16.8399999999999 24 9 C 24 5.54542319048073 22.8039804094246 2.41703354202741 20.7929431454809 0 L 711 0 C 716.6 0 721 4.40000000000009 721 10 L 721 510 C 721 515.6 716.6 520 711 520 L 11 520 C 5.39999999999998 520 1 515.6 1 510 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 1129 8994 )" />
|
||||||
|
<path d="M 1 510 L 0.999871317552845 19.7966825002877 C 3.4185524978235 21.8045610459778 6.54626184609054 23 10 23 C 17.84 23 24 16.8399999999999 24 9 C 24 5.54542319048073 22.8039804094246 2.41703354202741 20.7929431454809 0 L 711 0 C 716.6 0 721 4.40000000000009 721 10 L 721 510 C 721 515.6 716.6 520 711 520 L 11 520 C 5.39999999999998 520 1 515.6 1 510 Z " stroke-width="2" stroke="#ebebeb" fill="none" transform="matrix(1 0 0 1 1129 8994 )" mask="url(#clip598)" />
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -1126 -8991 )">
|
||||||
|
<use xlink:href="#widget600" filter="url(#filter599)" />
|
||||||
|
<use xlink:href="#widget600" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/like-icon-colours.png
Normal file
BIN
img/like-icon-colours.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
img/like-icon-gray.png
Normal file
BIN
img/like-icon-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/like-icon.png
Normal file
BIN
img/like-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
img/logo.png
Normal file
BIN
img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
11
img/menu-icon-gray.svg
Normal file
11
img/menu-icon-gray.svg
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter572">
|
||||||
|
<feColorMatrix type="matrix" values="1 0 0 0 0.4 0 1 0 0 0.4 0 0 1 0 0.4 0 0 0 1 0 " in="SourceGraphic" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -1686 -5323 )">
|
||||||
|
<image preserveAspectRatio="none" style="overflow:visible" width="14" height="14" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAIdQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA92IrIQAAACx0Uk5TAB5tuNj0bB0bmfz9qiBQ8/JOb24cGp6ba7e12/HZ12n7nJgZSU1MFZGitmptU/ZgAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAQ1JREFUeNrt1utOwlAQReEC5WKrnGKrItaK4t3z/s+nicYIHacN2ZHErO8nk7UDDSEkCQAAAAAAAAAAAPBpMByl43E6mkwP0syOsvglPz7pN6Vs5iH+UCz6bCmb0zxuycvuLWUz33n949L5eZRNFWJLceZvSZvzaLjwx5TNILMOWeVtSZsympbemLS5tA8rb0zaXNmH1BuTNsE+BG9M2vxyqPcY26+5tg+NNyZtDv4lnNiHG29M2kzNH4i1+6OibW6tw13ikjazov16vfHHtM196+HkD0kHbVPu/lEYdm2pm8XW06kfu7fUzdPz+vttvWz6bMmbavnahNCs3qp+U3/ZAAAAAAAAAAAA4J97B6Y13hOEznw5AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTAzLTE4VDEyOjI5OjA2KzA4OjAwpDFvtAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wMy0xOFQxMjoyOTowNiswODowMNVs1wgAAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX2V3MGNucnU1MjUvZ2VuZ2R1by5zdmfa+p/PAAAAAElFTkSuQmCC" x="1686px" y="5323px" filter="url(#filter572)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/mini-code.png
Normal file
BIN
img/mini-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
img/offer-mini-QRcode.png
Normal file
BIN
img/offer-mini-QRcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
17
img/tick-no.svg
Normal file
17
img/tick-no.svg
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="1157 9464 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<filter x="1157px" y="9464px" width="18px" height="18px" filterUnits="userSpaceOnUse" id="filter607">
|
||||||
|
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
|
||||||
|
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||||
|
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.117647058823529 0 " in="shadowComposite" />
|
||||||
|
</filter>
|
||||||
|
<g id="widget608">
|
||||||
|
<path d="M 1160.5 9467.5 L 1171.5 9467.5 L 1171.5 9478.5 L 1160.5 9478.5 L 1160.5 9467.5 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
|
||||||
|
<path d="M 1160.5 9467.5 L 1171.5 9467.5 L 1171.5 9478.5 L 1160.5 9478.5 L 1160.5 9467.5 Z " stroke-width="1" stroke="#797979" fill="none" />
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<use xlink:href="#widget608" filter="url(#filter607)" />
|
||||||
|
<use xlink:href="#widget608" />
|
||||||
|
</svg>
|
||||||
18
img/tick-option.svg
Normal file
18
img/tick-option.svg
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="1157 9464 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<filter x="1157px" y="9464px" width="18px" height="18px" filterUnits="userSpaceOnUse" id="filter609">
|
||||||
|
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
|
||||||
|
<feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner" result="shadowGaussian" />
|
||||||
|
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.117647058823529 0 " in="shadowComposite" />
|
||||||
|
</filter>
|
||||||
|
<g id="widget610">
|
||||||
|
<path d="M 1160.5 9467.5 L 1171.5 9467.5 L 1171.5 9478.5 L 1160.5 9478.5 L 1160.5 9467.5 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" />
|
||||||
|
<path d="M 1160.5 9467.5 L 1171.5 9467.5 L 1171.5 9478.5 L 1160.5 9478.5 L 1160.5 9467.5 Z " stroke-width="1" stroke="#797979" fill="none" />
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
<use xlink:href="#widget610" filter="url(#filter609)" />
|
||||||
|
<use xlink:href="#widget610" />
|
||||||
|
<path d="M 1162.57142857143 9473 L 1165.14285714286 9475.57142857143 L 1169.42857142857 9469.57142857143 " stroke-width="2.57142857142857" stroke="#797979" fill="none" />
|
||||||
|
</svg>
|
||||||
6
img/tick-orange.svg
Normal file
6
img/tick-orange.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="11px" height="8px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -784 -11798 )">
|
||||||
|
<path d="M 10.8012903225806 1.1043771043771 C 10.9337634408602 1.2300785634119 11 1.38271604938272 11 1.56228956228956 C 11 1.74186307519641 10.9337634408602 1.89450056116723 10.8012903225806 2.02020202020202 L 5.66322580645161 6.8956228956229 L 4.69806451612903 7.81144781144781 C 4.56559139784946 7.9371492704826 4.4047311827957 8 4.21548387096774 8 C 4.02623655913979 8 3.86537634408602 7.9371492704826 3.73290322580645 7.81144781144781 L 2.76774193548387 6.8956228956229 L 0.198709677419355 4.45791245791246 C 0.066236559139785 4.33221099887766 0 4.17957351290685 0 4 C 0 3.82042648709315 0.066236559139785 3.66778900112233 0.198709677419355 3.54208754208754 L 1.16387096774194 2.62626262626263 C 1.29634408602151 2.50056116722783 1.45720430107527 2.43771043771044 1.64645161290323 2.43771043771044 C 1.83569892473118 2.43771043771044 1.99655913978495 2.50056116722783 2.12903225806452 2.62626262626263 L 4.21548387096774 4.61279461279461 L 8.87096774193548 0.188552188552189 C 9.00344086021505 0.0628507295173959 9.16430107526882 0 9.35354838709677 0 C 9.54279569892473 0 9.7036559139785 0.0628507295173959 9.83612903225806 0.188552188552189 L 10.8012903225806 1.1043771043771 Z " fill-rule="nonzero" fill="#fa6b11" stroke="none" transform="matrix(1 0 0 1 784 11798 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
img/title.png
Normal file
BIN
img/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
img/transmit-icon.png
Normal file
BIN
img/transmit-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
6
img/triangle-icon.svg
Normal file
6
img/triangle-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="5px" height="10px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -873 -593 )">
|
||||||
|
<path d="M 4.83506944444444 4.560546875 C 4.94502314814815 4.68424479166667 5 4.83072916666667 5 5 C 5 5.16927083333333 4.94502314814815 5.31575520833333 4.83506944444444 5.439453125 L 0.946180555555556 9.814453125 C 0.836226851851852 9.93815104166667 0.706018518518519 10 0.555555555555556 10 C 0.405092592592593 10 0.274884259259259 9.93815104166667 0.164930555555556 9.814453125 C 0.0549768518518519 9.69075520833333 0 9.54427083333333 0 9.375 L 0 0.625 C 0 0.455729166666665 0.0549768518518519 0.309244791666665 0.164930555555556 0.185546875 C 0.274884259259259 0.0618489583333326 0.405092592592593 0 0.555555555555556 0 C 0.706018518518519 0 0.836226851851852 0.0618489583333326 0.946180555555556 0.185546875 L 4.83506944444444 4.560546875 Z " fill-rule="nonzero" fill="#fddf6d" stroke="none" transform="matrix(1 0 0 1 873 593 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
545
index.html
Normal file
545
index.html
Normal file
@ -0,0 +1,545 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<link rel="stylesheet" href="./css/index.css">
|
||||||
|
<script src="../js文件/vue@3.2.36.js"></script>
|
||||||
|
<!-- <script src="./js/masonry.pkgd.min.js"></script> -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="" id="answer-app">
|
||||||
|
<!-- <video poster="https://oss.gter.net/avatar/97KwEWQHYuMQGDnFqkimXF9SHKuGwVV5zW-tYWFjYQ~~/middle?istype=1&t=20231123103322" src="null" autoplay></video> -->
|
||||||
|
<header class="flexacenter" id="pageHeader">
|
||||||
|
<div class="flexacenter top">
|
||||||
|
<img class="logo" src="./img/logo.png">
|
||||||
|
<div class="right flexacenter flex1">
|
||||||
|
<div class="searchInput flexacenter">
|
||||||
|
<input class="input flex1" placeholder="输入搜索关键词" v-model="keyword" @keydown.enter="searchClick()" @focus="searchFocus" @blur="searchBlur" />
|
||||||
|
<img class="input-icon" src="./img/input-icon.png" @click="searchClick()">
|
||||||
|
<div class="history-box" v-if="historicalSearchState" @click.stop="">
|
||||||
|
<div class="history-title">历史搜索</div>
|
||||||
|
<div class="history-list">
|
||||||
|
<div class="history-item" v-for="(item,index) in historicalSearchList" :key="index" @click.stop="handleClickHistoricalItem(item)">{{ item }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-list flexacenter">
|
||||||
|
<div class="item flex1" @click="handleMy('collect')">我的收藏</div>
|
||||||
|
<div class="item flex1" @click="handleMy('questions')">我的提问</div>
|
||||||
|
<div class="item flex1" @click="handleMy('answers')">我的回答</div>
|
||||||
|
</div>
|
||||||
|
<div class="add-btn flexcenter" @click="questionsInit()">
|
||||||
|
<img class="add-icon" src="./img/add-icon.svg">
|
||||||
|
我要提问
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-box flexcenter" :class="{'tab-list-fixed': tabListFixeState}">
|
||||||
|
<div class="tab-list flexacenter">
|
||||||
|
<div class="item flexcenter" :class="{'pitch': typePitch === item['id'] }" v-for="(item,index) in typeList" :key="index">{{ item['name'] }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- <div class="" v-if="keyword && list.length == 0">搜索为空</div> -->
|
||||||
|
|
||||||
|
<div class="main flexflex" :class="{'mode-list': type == 'list'}">
|
||||||
|
<div class="list-box" :style="listBoxStyle()" @scroll="handleListScroll">
|
||||||
|
<div class="main-header " :style="{paddingLeft: type == 'list' ? 0 : 'calc((100vw - 1200px) / 2)'}">
|
||||||
|
<div class="search-keyword flexacenter" v-if="isSearchMode" @click="handleClickClear()">
|
||||||
|
{{ keyword }}<img class="search-keyword-cross" src="./img/cross-circle-icon.png">
|
||||||
|
</div>
|
||||||
|
<div class="total grid-item" @click="cut">共 {{ total }} 条回答</div>
|
||||||
|
</div>
|
||||||
|
<div class="list" id="list" :style="listStyle()">
|
||||||
|
<div class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index,item['content'])" :class="{'pitch': index === pitchIndex,'upLevel': index === pitchIndex - 1}">
|
||||||
|
<img class="dot" src="./img/dot.svg">
|
||||||
|
<div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
|
||||||
|
<div class="issue ellipsis" v-html="item['title']"></div>
|
||||||
|
<div class="answer ellipsis">{{ item['content'] || '' }}</div>
|
||||||
|
<div class="bottom flexacenter">
|
||||||
|
<div class="quantity">{{ item['answers'] == 0 ? '暂无回答' : `共${ item['answers'] }个回答` }}</div>
|
||||||
|
<div class="longString"></div>
|
||||||
|
<div class="answer-btn" @click.stop="getDetails(item['uniqid'],index)">我来回答</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="empty-box flexcenter" v-if="isSearchMode && list.length == 0">
|
||||||
|
<div class="dot-list flexacenter"><img class="item" src="./img/dot-yellow.svg"><img class="item" src="./img/dot-yellow.svg"><img class="item" src="./img/dot-yellow.svg"><img class="item" src="./img/dot-gray.svg"><img class="item" src="./img/dot-gray.svg"><img class="item" src="./img/dot-gray.svg"></div><img class="empty-icon" src="./img/empty-icon.svg">
|
||||||
|
<div class="empty-hint">没有找到相关结果，请更换搜索关键词</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="details-area-box flexflex" v-if="type == 'details'" :style="{height: 'calc(100vh - ' + pageHeaderHeight + 'px)'}"> -->
|
||||||
|
<div class="details-area-box flexflex" v-if="type == 'details'" :style="{height: pageListHeight + 'px'}">
|
||||||
|
<div class="details-box flexflex">
|
||||||
|
<div class="close-box">
|
||||||
|
<div class="close-circle flexcenter" @click="closeDetailMode()">
|
||||||
|
<img class="close-icon" src="./img/close-icon.svg" />
|
||||||
|
<img class="details-cross-icon" src="./img/cross-icon.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 提问信息 -->
|
||||||
|
<div class="details-issue">
|
||||||
|
<div class="title">{{ detailsInfo['title'] }}</div>
|
||||||
|
<div class="hint" v-html="detailsInfo['content']"></div>
|
||||||
|
<div class="info-box flexacenter">
|
||||||
|
<div class="user-info flexacenter">
|
||||||
|
<img class="avatar" :src="detailsInfo['avatar']">
|
||||||
|
<div class="user-name">{{ detailsInfo['nickname'] }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="time">{{ handleDate(detailsInfo['publicationdate']) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="operate-box flexacenter">
|
||||||
|
<div class="answer-btn flexcenter" :class="{'white': detailsInfo['answers'] == 0}" @click="openIAnswer()">
|
||||||
|
<img class="answer-btn-icon answer-icon-edit" src="./img/edit-icon.png">
|
||||||
|
<img class="answer-btn-icon answer-icon-white" src="./img/edit-icon-white.svg">
|
||||||
|
我来回答
|
||||||
|
</div>
|
||||||
|
<div class="operate-list flexacenter">
|
||||||
|
<div class="operate-item flexacenter" @click="operateCollect()">
|
||||||
|
<img class="operate-icon operate-collect-icon" :src="detailsIscollection == 0 ? './img/collect-icon.png' : './img/collect-icon-colours.svg'">
|
||||||
|
收藏
|
||||||
|
</div>
|
||||||
|
<div class="operate-item flexacenter operate-transmit" style="z-index: 2;" @click="closeTransmitState()">
|
||||||
|
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
|
||||||
|
转发
|
||||||
|
<div class="transmit-box flexflex" v-if="questionsTransmitState" @click.stop="">
|
||||||
|
<!-- <div class="transmit-mask" @click="closeTransmitState()"></div> -->
|
||||||
|
<div class="transmit-left transmit-web">
|
||||||
|
<div class="transmit-title">转发网页版</div>
|
||||||
|
<div class="transmit-content">
|
||||||
|
<div class="transmit-headline">25fall!求定位，大佬帮忙解答一下~ (港，新，美)</div>
|
||||||
|
<div class="transmit-url">https://ask.gter.net/jb179020.html</div>
|
||||||
|
</div>
|
||||||
|
<div class="transmit-web-btn flexcenter">复制链接</div>
|
||||||
|
</div>
|
||||||
|
<div class="transmit-right transmit-mini">
|
||||||
|
<div class="transmit-title">转发小程序版</div>
|
||||||
|
<div class="transmit-content flexcenter">
|
||||||
|
<img class="transmit-mini-img" :src="detailShare['qrcode']">
|
||||||
|
<div class="flexcenter">
|
||||||
|
<img class="give-sweep" src="./img/give-sweep.png">
|
||||||
|
扫码转发该问答
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 一共多少 -->
|
||||||
|
<div class="answer-total-amount">共 {{ detailsInfo['answers'] }} 个回答</div>
|
||||||
|
|
||||||
|
<!-- 回答-没有数据 -->
|
||||||
|
<div class="answer-empty-box flexcenter" v-if="answerList.length == 0">
|
||||||
|
<div class="empty-box flexcenter">
|
||||||
|
<div class="dot-list flexacenter">
|
||||||
|
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3">
|
||||||
|
<img class="dot-item" src="./img/dot-gray.svg" v-for="item in 3">
|
||||||
|
</div>
|
||||||
|
<img class="empty-icon" src="./img/empty-icon.svg">
|
||||||
|
</div>
|
||||||
|
<div class="empty-hint">我在等待你的回答</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 回答-数据 -->
|
||||||
|
<div class="answer-box-item" v-for="(item,index) in answerList" :style="{zIndex: item['transmitState'] ? 1 : 0}">
|
||||||
|
<div class="answer-text" v-html="item['content']"></div>
|
||||||
|
|
||||||
|
<div class="info-box flexacenter">
|
||||||
|
<div class="user-info flexacenter">
|
||||||
|
<img class="avatar" :src="item['avatar']">
|
||||||
|
<div class="user-name">{{ item['nickname'] }}</div>
|
||||||
|
<img class="homeShare" src="./img/title.png" v-if="item['groupid'] == 14" />
|
||||||
|
</div>
|
||||||
|
<div class="time">{{ handleDate(item['publicationdate']) }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="operate-box flexacenter">
|
||||||
|
<div class="edit-box">
|
||||||
|
<div class="edit-btn flexcenter" v-if="item['ismyself'] == 1" @click="openIAnswer(index)">
|
||||||
|
<img class="edit-icon" src="./img/edit-icon.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="operate-list flexacenter">
|
||||||
|
<div class="operate-item flexacenter" @click="operateLike(item['token'],index)">
|
||||||
|
<img class="operate-icon operate-like-icon" :src="item['islike'] == 1 ? './img/like-icon-colours.png' : './img/like-icon.png'">
|
||||||
|
{{ item['likenum'] }}
|
||||||
|
</div>
|
||||||
|
<div class="operate-item flexacenter " :class="{'commentnum': item['commentState'] }" @click="openCommentState(index)">
|
||||||
|
<img class="operate-icon operate-comment-icon" src="./img/comment-icon.png">
|
||||||
|
{{ item['commentnum'] }}
|
||||||
|
</div>
|
||||||
|
<div class="operate-item flexacenter" @click="operateCollect(item['token'],index)">
|
||||||
|
<img class="operate-icon operate-collect-icon" :src="item['iscollection'] == 1 ? './img/collect-icon-colours.svg' : './img/collect-icon.png'">
|
||||||
|
{{ item['collectionnum'] == 0 ? '收藏' : item['collectionnum'] }}
|
||||||
|
</div>
|
||||||
|
<div class="operate-item operate-transmit flexacenter" @click="handleAnswerTransmitList(index)">
|
||||||
|
<img class="operate-icon operate-transmit-icon" src="./img/transmit-icon.png">
|
||||||
|
转发
|
||||||
|
<div class="transmit-box flexflex" v-if="item['transmitState']" @click.stop="">
|
||||||
|
<!-- <div class="transmit-mask" @click="handleAnswerTransmitList(index)"></div> -->
|
||||||
|
<div class="transmit-left transmit-web">
|
||||||
|
<div class="transmit-title">转发网页版</div>
|
||||||
|
<div class="transmit-content">
|
||||||
|
<div class="transmit-headline">25fall!求定位，大佬帮忙解答一下~ (港，新，美)</div>
|
||||||
|
<div class="transmit-url">https://ask.gter.net/jb179020.html</div>
|
||||||
|
</div>
|
||||||
|
<div class="transmit-web-btn flexcenter">复制链接</div>
|
||||||
|
</div>
|
||||||
|
<div class="transmit-right transmit-mini">
|
||||||
|
<div class="transmit-title">转发小程序版</div>
|
||||||
|
<div class="transmit-content flexcenter">
|
||||||
|
<img class="transmit-mini-img" src="./img/mini-code.png">
|
||||||
|
<div class="flexcenter">
|
||||||
|
<img class="give-sweep" src="./img/give-sweep.png">
|
||||||
|
扫码转发该问答
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-if="item['commentState']">
|
||||||
|
<div class="post-comment flexacenter">
|
||||||
|
<input class="post-input flex1" placeholder="说点什么…" v-model="item['commentInput']" />
|
||||||
|
<div class="post-ok flexcenter" @click="submitAnswerComments(index)">OK</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评论 -->
|
||||||
|
<div class="comments-box" v-if="item['commentList'] && item['commentList'].length != 0">
|
||||||
|
<div class="comments-item" v-for="(it , ind) in item['commentList']" :key="ind">
|
||||||
|
<div class="comments-header flexacenter">
|
||||||
|
<div class="comments-header-left flexacenter">
|
||||||
|
<img class="comments-avatar" :src="it['avatar']">
|
||||||
|
<div class="comments-username">{{ it['nickname'] }}</div>
|
||||||
|
<div class="comments-time">{{ handleDate(it['timestamp']) }}</div>
|
||||||
|
<!-- <div class="comments-identity">提问者</div> -->
|
||||||
|
<div class="comments-identity" v-if="item['isauthor']">提问者</div>
|
||||||
|
</div>
|
||||||
|
<div class="comments-header-right flexacenter">
|
||||||
|
<div class="menu-box flexacenter">
|
||||||
|
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
||||||
|
<div class="report-box flexcenter" v-if="false">举报</div>
|
||||||
|
</div>
|
||||||
|
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind)" src="./img/comment-icon-gray.svg">
|
||||||
|
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(it['token'],index,ind)">
|
||||||
|
<img class="like-icon" :src=" it['islike'] == 0 ? './img/like-icon-gray.png' : './img/like-icon-colours.png'">
|
||||||
|
<div class="like-quantity">{{ it['likenum'] || 0 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comments-content">
|
||||||
|
<div class="comments-text"> {{ it['content'] }}</div>
|
||||||
|
<div class="comments-input-box flexacenter" v-if="it['childState']">
|
||||||
|
<div class="comments-input flexflex">
|
||||||
|
<textarea class="flex1" placeholder="回复" v-model="it['commentInput']"></textarea>
|
||||||
|
<div class="comments-btn flexcenter" @click="submitAnswerComments(index,ind)">发送</div>
|
||||||
|
</div>
|
||||||
|
<img class="forkfork" src="./img/cross-icon.png" @click="closeAnswerCommentsChild(index,ind)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="child-comments" v-if="it['child'].length != 0">
|
||||||
|
<div class="comments-item" v-for="(ite, i) in it['child']" :key="i">
|
||||||
|
<div class="comments-header flexacenter">
|
||||||
|
<div class="comments-header-left flexacenter">
|
||||||
|
<img class="comments-avatar" :src="ite['avatar']">
|
||||||
|
<div class="comments-username">{{ ite['nickname'] }}</div>
|
||||||
|
<div class="comments-time">{{ handleDate(ite['timestamp']) }}</div>
|
||||||
|
<!-- <div class="comments-identity">提问者</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="comments-header-right flexacenter">
|
||||||
|
<div class="menu-box flexacenter">
|
||||||
|
<img class="menu-icon" src="./img/menu-icon-gray.svg">
|
||||||
|
<div class="report-box flexcenter" v-if="false">举报</div>
|
||||||
|
</div>
|
||||||
|
<img class="comment-icon" @click="openAnswerCommentsChild(index,ind,i)" src="./img/comment-icon-gray.svg">
|
||||||
|
<div class="flexacenter like-box" @click="operateAnswerCommentsLike(ite['token'],index,ind,i)">
|
||||||
|
<img class="like-icon" :src=" ite['islike'] == 0 ? './img/like-icon-gray.png' : './img/like-icon-colours.png'">
|
||||||
|
<div class="like-quantity">{{ ite['likenum'] || 0 }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comments-content">
|
||||||
|
<div class="comments-text">
|
||||||
|
<div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite['reply']['nickname'] }} </div>
|
||||||
|
{{ ite['content'] }}
|
||||||
|
</div>
|
||||||
|
<div class="comments-input-box flexacenter" v-if="ite['childState']">
|
||||||
|
<div class="comments-input flexflex">
|
||||||
|
<textarea class="flex1" placeholder="回复" v-model="ite['commentInput']"></textarea>
|
||||||
|
<div class="comments-btn flexcenter" @click="submitAnswerComments(index,ind,i)">发送</div>
|
||||||
|
</div>
|
||||||
|
<img class="forkfork" src="./img/cross-icon.png" @click="closeAnswerCommentsChild(index,ind,i)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comments-also flexacenter" v-if="it['childnum'] >= 3 && it['childnum'] != it['child'].length" @click="alsoCommentsData(index,ind)">
|
||||||
|
<div class="">还有{{ it['childnum'] - 3 }}条回复</div>
|
||||||
|
<img class="also-icon" src="./img/arrow-circular-gray.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reverl-all flexcenter" @click="handleAllComment(index)" v-if="item['commentCount'] != item['commentList'].length">
|
||||||
|
显示全部
|
||||||
|
<img class="arrow-circular" src="./img/arrow-circular-gray.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评论为空时 -->
|
||||||
|
<!-- <div class="comments-empty-box flexflex" v-if="item['commentnum'] == 0"> -->
|
||||||
|
<div class="comments-empty-box flexflex" v-else>
|
||||||
|
<div class="empty-box flexcenter">
|
||||||
|
<div class="dot-list flexacenter">
|
||||||
|
<img class="dot-item" src="./img/dot-yellow.svg" v-for="item in 3">
|
||||||
|
<img class="dot-item" src="./img/dot-gray.svg" v-for="item in 3">
|
||||||
|
</div>
|
||||||
|
<img class="empty-icon" src="./img/empty-icon.svg">
|
||||||
|
</div>
|
||||||
|
<div class="empty-hint">和我说说你的想法或疑问吧</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- · 著作权归作者所有 · -->
|
||||||
|
<div class="copyright">· 著作权归作者所有 ·</div>
|
||||||
|
|
||||||
|
<!-- div -->
|
||||||
|
<div class="mobile-phone-check flexcenter">
|
||||||
|
<img class="QRCode-icon" src="./img/QRCode-icon.svg" alt="">
|
||||||
|
手机查看该问答
|
||||||
|
|
||||||
|
<div class="QRCode-pop flexcenter">
|
||||||
|
<img class="offer-mini-QRcode" src="./img/offer-mini-QRcode.png">
|
||||||
|
<div class="QRCode-hint flexacenter">
|
||||||
|
<img class="QRCode-img" src="./img/give-sweep.png" />
|
||||||
|
微信扫一扫
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 我的弹窗 -->
|
||||||
|
<div class="popover-mask my-popover flexcenter" v-if="myType">
|
||||||
|
<div class="popover-box flexflex">
|
||||||
|
<img class="cross-icon" src="./img/cross-icon.png" @click="myType = ''">
|
||||||
|
<div class="tab-list flexcenter">
|
||||||
|
<div class="tab-item flexacenter" :class="{'pitch': myType == 'collect'}" @click="handleMy('collect')">我的收藏 <div class="quantity">{{ myCollectionCount || 0}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="long-string"></div>
|
||||||
|
<div class="tab-item flexacenter" :class="{'pitch': myType == 'answers'}" @click="handleMy('answers')">我的回答 <div class="quantity">{{ myAnswerCount }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="long-string"></div>
|
||||||
|
<div class="tab-item flexacenter" :class="{'pitch': myType == 'questions'}" @click="handleMy('questions')">我的提问 <div class="quantity">{{ myQuestionsCount }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="empty-box flexcenter" v-if="(myType == 'collect' && myCollectionList.length == 0) || (myType == 'answers' && myAnswerList.length == 0) || (myType == 'questions' && myQuestionsList.length == 0)">
|
||||||
|
<div class="dot-list flexacenter">
|
||||||
|
<img class="item" src="./img/dot-yellow.svg">
|
||||||
|
<img class="item" src="./img/dot-yellow.svg">
|
||||||
|
<img class="item" src="./img/dot-yellow.svg">
|
||||||
|
<img class="item" src="./img/dot-gray.svg">
|
||||||
|
<img class="item" src="./img/dot-gray.svg">
|
||||||
|
<img class="item" src="./img/dot-gray.svg">
|
||||||
|
</div>
|
||||||
|
<img class="empty-icon" src="./img/empty-icon.svg">
|
||||||
|
<div class="empty-hint">暂无内容</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-box collect-list" v-if="myType == 'collect'" @scroll="handleCollectionScroll">
|
||||||
|
<div class="item flexflex" v-for="(item,index) in myCollectionList" :key="item">
|
||||||
|
<template v-if="item.type == 'askanswercollection'">
|
||||||
|
<div class="icon a flexcenter">A</div>
|
||||||
|
<div class="centre flexflex flex1">
|
||||||
|
<div class="title ellipsis" v-html="item['data']['content']"></div>
|
||||||
|
<div class="text ellipsis">提问：{{ item['data']['title'] }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="delete-box flexacenter">
|
||||||
|
<img class="delete-icon" @click="cancelCollection(item['token'],index)" src="./img/delete-icon.svg">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="icon q flexcenter">Q</div>
|
||||||
|
<div class="centre flexflex flex1">
|
||||||
|
<div class="title ellipsis">{{ item['data']['title'] }}</div>
|
||||||
|
<div class="text ellipsis">{{ item['data']['answers'] > 0 ? `共${ item['data']['answers'] }个回答` : '暂无回答'}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="delete-box flexacenter">
|
||||||
|
<img class="delete-icon" @click="cancelCollection(item['token'],index)" src="./img/delete-icon.svg">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-box answers-list" v-if="myType == 'answers'" @scroll="handleAnswersScroll">
|
||||||
|
<div class="item flexflex" v-for="(item,index) in myAnswerList" :key="item">
|
||||||
|
<div class="icon a flexcenter">A</div>
|
||||||
|
<!-- <div class="icon a flexcenter">A</div> -->
|
||||||
|
<div class="centre flexflex flex1">
|
||||||
|
<div class="info flexacenter">
|
||||||
|
<div class="name">{{ item['nickname'] }}</div>
|
||||||
|
<div class="time">{{ item['publicationdate'] }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="title ellipsis" v-html="item['content']"></div>
|
||||||
|
<div class="text ellipsis">提问：{{ item['title'] }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="operate-box flexacenter">
|
||||||
|
<div class="state-box flexacenter" @click="cutAnswerPopupState(index)">
|
||||||
|
<div class="text">{{ item['anonymous'] == 0 ? '公开' : '匿名' }}</div>
|
||||||
|
<img class="arrows" src="./img/arrows-icon.svg">
|
||||||
|
<div class="state-popup flexflex" v-if="item['popupState']">
|
||||||
|
<div class="state-popup-mask" @click.stop="cutAnswerPopupState(index)"></div>
|
||||||
|
<div class="state-popup-item flexacenter flex1" :class="{'pitch': item['anonymous'] == 0 }" @click.stop="changeAnonymous(item['token'], 0,index)">
|
||||||
|
<div class="">公开发表</div>
|
||||||
|
<img class="state-popup-icon" src="./img/tick-orange.svg">
|
||||||
|
</div>
|
||||||
|
<div class="state-popup-item flexacenter flex1" :class="{'pitch': item['anonymous'] == 1 }" @click.stop="changeAnonymous(item['token'], 1,index)">
|
||||||
|
<div class="">匿名发表</div>
|
||||||
|
<img class="state-popup-icon" src="./img/tick-orange.svg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img class="edit-icon" @click="openIAnswer(index,'my')" src="./img/edit-icon.png">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-box questions-list" v-if="myType == 'questions' && myQuestionsList.length != 0">
|
||||||
|
<div class="item flexflex" v-for="item in myQuestionsList" :key="item">
|
||||||
|
<div class="icon q flexcenter">Q</div>
|
||||||
|
<!-- <div class="icon a flexcenter">A</div> -->
|
||||||
|
<div class="centre flexflex flex1">
|
||||||
|
<div class="info flexacenter">
|
||||||
|
<div class="name">Ada.Wu</div>
|
||||||
|
<div class="time">1小时前</div>
|
||||||
|
</div>
|
||||||
|
<div class="title ellipsis">关于港大RP和HKFPS的RP部分能否有相同的部分内容？</div>
|
||||||
|
<div class="text flexacenter">
|
||||||
|
<div class="new-answer flexacenter">有1个新回答 <div class="long-string"></div>
|
||||||
|
</div>
|
||||||
|
暂无回答
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="operate-box flexacenter">
|
||||||
|
<div class="state-box flexacenter">
|
||||||
|
<div class="text">公开</div>
|
||||||
|
<img class="arrows" src="./img/arrows-icon.svg">
|
||||||
|
<div class="state-popup flexflex" v-if="false">
|
||||||
|
<div class="state-popup-item flexacenter flex1 pitch">
|
||||||
|
<div class="">公开发表</div>
|
||||||
|
<img class="state-popup-icon" src="./img/tick-orange.svg">
|
||||||
|
</div>
|
||||||
|
<div class="state-popup-item flexacenter flex1">
|
||||||
|
<div class="">公开发表</div>
|
||||||
|
<img class="state-popup-icon" src="./img/tick-orange.svg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 我要提问 -->
|
||||||
|
<div class="popover-mask flexcenter issue-box" v-if="questionsSetp">
|
||||||
|
<!-- 第一步 -->
|
||||||
|
<div class="choosing-theme" v-if="questionsSetp == 1">
|
||||||
|
<div class="title">选择提问所属主题</div>
|
||||||
|
<div class="theme-list flexflex">
|
||||||
|
<div class="theme-item flexcenter" v-for="item in questionsTypeList" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第二步 -->
|
||||||
|
<div class="issue-form" v-else>
|
||||||
|
<!-- <img class="issue-bj" src="./img/issue-bj.svg"> -->
|
||||||
|
<!-- <div class="flexcenter q">Q</div> -->
|
||||||
|
<img class="cross-icon" @click="cutQuestionsSetp(0)" src="./img/cross-icon.png">
|
||||||
|
<div class="issue-input">
|
||||||
|
<input class="" v-model="questionsObj.title" placeholder="一句话描述问题，以问号结尾" />
|
||||||
|
</div>
|
||||||
|
<textarea class="issue-replenish" v-model="questionsObj.content" placeholder="欢迎对问题补充说明，清晰表达问题的关键点，可获得更有效的解答（非必填）"></textarea>
|
||||||
|
<div class="issue-bottom flexacenter">
|
||||||
|
<div class="option-box flexacenter" @click="cutAnonymous">
|
||||||
|
<img class="option-icon" v-if="questionsObj.anonymous == 0" src="./img/tick-no.svg">
|
||||||
|
<img class="option-icon" v-else src="./img/tick-option.svg">
|
||||||
|
匿名发表
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="issue-btn flexcenter" @click="postingIssue">发布问题</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑回答 -->
|
||||||
|
<div class="popover-mask flexcenter" v-if="IAnswerEditState">
|
||||||
|
<div class="edit-answers">
|
||||||
|
<img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer">
|
||||||
|
<div class="title">编辑回答</div>
|
||||||
|
<textarea placeholder="输入图文内容回答提问" v-model="IAnswerInfo['text']"></textarea>
|
||||||
|
<div class="issue-bottom flexacenter">
|
||||||
|
<div class="option-box flexacenter">
|
||||||
|
<img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg">
|
||||||
|
<img class="option-icon" v-else src="./img/tick-option.svg">
|
||||||
|
匿名发表
|
||||||
|
</div>
|
||||||
|
<div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 我来回答 -->
|
||||||
|
<div class="popover-mask flexcenter" v-if="IAnswerState">
|
||||||
|
<div class="i-answer-box flexflex">
|
||||||
|
<img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer">
|
||||||
|
<div class="question-header">
|
||||||
|
<div class="question-title flexflex">
|
||||||
|
<div class="question-icon flexcenter">Q</div>
|
||||||
|
<div class="flex1">{{ IAnswerInfo['title'] }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="question-replenish" v-html="IAnswerInfo['content']"></div>
|
||||||
|
</div>
|
||||||
|
<div class="question-middle flexflex">
|
||||||
|
<div class="question-icon flexcenter">A</div>
|
||||||
|
<!-- <textarea class="question-textarea flex1" placeholder="输入图文内容回答提问" v-model="IAnswerInfo['text']"></textarea> -->
|
||||||
|
<div class="question-textarea" :class="{'placeholder': questionPlaceholderState}" contenteditable="true" @paste="handlePaste" v-html="IAnswerInfo['text']" @input="handleInput"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="issue-bottom flexacenter">
|
||||||
|
<div class="option-box flexacenter" @click="amendIAnswer">
|
||||||
|
<img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg">
|
||||||
|
<img class="option-icon" v-else src="./img/tick-option.svg">
|
||||||
|
匿名发表
|
||||||
|
</div>
|
||||||
|
<div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="../js文件/axios.min.js"></script>
|
||||||
|
<script src="./js/index.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1025
js/index.js
Normal file
1025
js/index.js
Normal file
File diff suppressed because it is too large
Load Diff
9
js/masonry.pkgd.min.js
vendored
Normal file
9
js/masonry.pkgd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user