mirror of https://github.com/sunface/rust-course
fix #28
sunface
6 years ago
parent
90d1f4bb2e
commit
636082faab
@ -0,0 +1 @@
|
|||||||
|
im.dev
|
||||||
@ -1,66 +0,0 @@
|
|||||||
package session
|
|
||||||
|
|
||||||
import (
|
|
||||||
"net/http"
|
|
||||||
"time"
|
|
||||||
|
|
||||||
"github.com/labstack/echo"
|
|
||||||
"go.uber.org/zap"
|
|
||||||
|
|
||||||
"github.com/thinkindev/im.dev/internal/ecode"
|
|
||||||
"github.com/thinkindev/im.dev/internal/misc"
|
|
||||||
)
|
|
||||||
|
|
||||||
// InitUser insert preserve users
|
|
||||||
func InitUser() {
|
|
||||||
err := misc.CQL.Query(`INSERT INTO user (id,name,nickname,avatar,create_date,edit_date) VALUES (?,?,?,?,?,?)`,
|
|
||||||
"13269", "sunface", "Sunface", "https://avatars2.githubusercontent.com/u/7036754?s=460&v=4", time.Now().Unix(), 0).Exec()
|
|
||||||
if err != nil {
|
|
||||||
misc.Log.Warn("access database error", zap.Error(err))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// CheckUserExist checks user exist by given user id
|
|
||||||
func CheckUserExist(n string) bool {
|
|
||||||
var name string
|
|
||||||
err := misc.CQL.Query(`SELECT name FROM user where name=?`, n).Scan(&name)
|
|
||||||
if err != nil && err.Error() != misc.CQLNotFound {
|
|
||||||
misc.Log.Warn("access database error", zap.Error(err))
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
if name != "" {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
// GetUser returns user detail info
|
|
||||||
func GetUser(c echo.Context) error {
|
|
||||||
uid := c.FormValue("uid")
|
|
||||||
sess := GetUserByID(uid)
|
|
||||||
if sess == nil {
|
|
||||||
return c.JSON(http.StatusInternalServerError, misc.HTTPResp{
|
|
||||||
ErrCode: ecode.DatabaseError,
|
|
||||||
Message: ecode.CommonErrorMsg,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return c.JSON(http.StatusOK, misc.HTTPResp{
|
|
||||||
Data: sess,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// GetUserByID return the user info by user id
|
|
||||||
func GetUserByID(uid string) *Session {
|
|
||||||
sess := &Session{ID: uid}
|
|
||||||
|
|
||||||
err := misc.CQL.Query(`SELECT name,nickname,avatar FROM user WHERE id=?`, uid).Scan(&sess.Name, &sess.NickName, &sess.Avatar)
|
|
||||||
if err != nil && err.Error() != misc.CQLNotFound {
|
|
||||||
misc.Log.Warn("access database error", zap.Error(err))
|
|
||||||
return nil
|
|
||||||
}
|
|
||||||
|
|
||||||
return sess
|
|
||||||
}
|
|
||||||
@ -0,0 +1,260 @@
|
|||||||
|
package user
|
||||||
|
|
||||||
|
import (
|
||||||
|
"encoding/json"
|
||||||
|
"errors"
|
||||||
|
"net/http"
|
||||||
|
"strings"
|
||||||
|
"time"
|
||||||
|
"unicode/utf8"
|
||||||
|
|
||||||
|
"github.com/labstack/echo"
|
||||||
|
"go.uber.org/zap"
|
||||||
|
|
||||||
|
"github.com/thinkindev/im.dev/internal/ecode"
|
||||||
|
"github.com/thinkindev/im.dev/internal/misc"
|
||||||
|
"github.com/thinkindev/im.dev/internal/utils"
|
||||||
|
"github.com/thinkindev/im.dev/internal/utils/validate"
|
||||||
|
)
|
||||||
|
|
||||||
|
// InitUser insert preserve users
|
||||||
|
func InitUser() {
|
||||||
|
err := misc.CQL.Query(`INSERT INTO user (id,name,nickname,avatar,create_date,edit_date) VALUES (?,?,?,?,?,?)`,
|
||||||
|
"13269", "sunface", "Sunface", "https://avatars2.githubusercontent.com/u/7036754?s=460&v=4", time.Now().Unix(), 0).Exec()
|
||||||
|
if err != nil {
|
||||||
|
misc.Log.Warn("access database error", zap.Error(err))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// CheckUserExist checks user exist by given user id
|
||||||
|
func CheckUserExist(n string) bool {
|
||||||
|
var name string
|
||||||
|
err := misc.CQL.Query(`SELECT name FROM user where name=?`, n).Scan(&name)
|
||||||
|
if err != nil && err.Error() != misc.CQLNotFound {
|
||||||
|
misc.Log.Warn("access database error", zap.Error(err))
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
if name != "" {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
// Card returns user detail card info
|
||||||
|
func Card(c echo.Context) error {
|
||||||
|
uid := c.FormValue("uid")
|
||||||
|
if uid == "" {
|
||||||
|
return c.JSON(http.StatusBadRequest, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.ParamInvalid,
|
||||||
|
Message: ecode.ParamInvalidMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
user := &User{}
|
||||||
|
q := misc.CQL.Query(`SELECT name,nickname,avatar,website,about,location,bg_color,text_color,looking_for_work,education,employer,
|
||||||
|
create_date FROM user WHERE id=?`, uid)
|
||||||
|
err := q.Scan(&user.Name, &user.NickName,
|
||||||
|
&user.Avatar, &user.Website, &user.About, &user.Location, &user.BgColor, &user.TextColor, &user.LookingForWork,
|
||||||
|
&user.Education, &user.Employer, &user.createDate)
|
||||||
|
|
||||||
|
if err != nil {
|
||||||
|
if err.Error() == misc.CQLNotFound {
|
||||||
|
return c.JSON(http.StatusNotFound, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.NotFound,
|
||||||
|
Message: ecode.NotFoundMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
misc.Log.Warn("access database error", zap.Error(err))
|
||||||
|
return c.JSON(http.StatusInternalServerError, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.DatabaseError,
|
||||||
|
Message: ecode.CommonErrorMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
user.CreateDate = utils.Time2ReadableString(time.Unix(user.createDate, 0))
|
||||||
|
if user.BgColor == "" {
|
||||||
|
user.BgColor = "#000"
|
||||||
|
}
|
||||||
|
if user.TextColor == "" {
|
||||||
|
user.TextColor = "#000"
|
||||||
|
}
|
||||||
|
return c.JSON(http.StatusOK, misc.HTTPResp{
|
||||||
|
Data: user,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// GetUserByID return the user info by user id
|
||||||
|
func GetUserByID(uid string) *Session {
|
||||||
|
sess := &Session{ID: uid}
|
||||||
|
|
||||||
|
err := misc.CQL.Query(`SELECT name,nickname,avatar FROM user WHERE id=?`, uid).Scan(&sess.Name, &sess.NickName, &sess.Avatar)
|
||||||
|
if err != nil && err.Error() != misc.CQLNotFound {
|
||||||
|
misc.Log.Warn("access database error", zap.Error(err))
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
|
||||||
|
return sess
|
||||||
|
}
|
||||||
|
|
||||||
|
// User holds all info of one user
|
||||||
|
type User struct {
|
||||||
|
//----account-----
|
||||||
|
ID string `json:"id"`
|
||||||
|
Name string `json:"name"`
|
||||||
|
Email string `json:"email,omitempty"`
|
||||||
|
//----profile-----
|
||||||
|
NickName string `json:"nickname"`
|
||||||
|
Avatar string `json:"avatar"`
|
||||||
|
Website string `json:"website"`
|
||||||
|
About string `json:"about"`
|
||||||
|
Location string `json:"location"`
|
||||||
|
BgColor string `json:"bg_color"`
|
||||||
|
TextColor string `json:"text_color"`
|
||||||
|
LookingForWork bool `json:"lfw"`
|
||||||
|
Education string `json:"education"`
|
||||||
|
Employer string `json:"employer"`
|
||||||
|
Skills string `json:"skills"`
|
||||||
|
AvailableFor string `json:"available_for"`
|
||||||
|
WorkingExp string `json:"working_exp"`
|
||||||
|
|
||||||
|
CreateDate string `json:"create_date"`
|
||||||
|
EditDate string `json:"edit_date"`
|
||||||
|
|
||||||
|
createDate int64
|
||||||
|
editDate int64
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profile return user's detail profile
|
||||||
|
func Profile(c echo.Context) error {
|
||||||
|
sess := GetSession(c)
|
||||||
|
user := &User{}
|
||||||
|
q := misc.CQL.Query(`SELECT id,name,email,nickname,avatar,website,about,location,bg_color,text_color,looking_for_work,education,employer,skills,
|
||||||
|
available_for,working_exp,create_date,edit_date FROM user WHERE id=?`, sess.ID)
|
||||||
|
err := q.Scan(&user.ID, &user.Name, &user.Email, &user.NickName,
|
||||||
|
&user.Avatar, &user.Website, &user.About, &user.Location, &user.BgColor, &user.TextColor, &user.LookingForWork,
|
||||||
|
&user.Education, &user.Employer, &user.Skills, &user.AvailableFor, &user.WorkingExp, &user.createDate, &user.editDate)
|
||||||
|
|
||||||
|
if err != nil {
|
||||||
|
if err.Error() == misc.CQLNotFound {
|
||||||
|
return c.JSON(http.StatusNotFound, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.NotFound,
|
||||||
|
Message: ecode.NotFoundMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
misc.Log.Warn("access database error", zap.Error(err))
|
||||||
|
return c.JSON(http.StatusInternalServerError, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.DatabaseError,
|
||||||
|
Message: ecode.CommonErrorMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
user.CreateDate = utils.Time2ReadableString(time.Unix(user.createDate, 0))
|
||||||
|
if user.BgColor == "" {
|
||||||
|
user.BgColor = "#000"
|
||||||
|
}
|
||||||
|
if user.TextColor == "" {
|
||||||
|
user.TextColor = "#000"
|
||||||
|
}
|
||||||
|
return c.JSON(http.StatusOK, misc.HTTPResp{
|
||||||
|
Data: user,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// SetProfile set user profile
|
||||||
|
func SetProfile(c echo.Context) error {
|
||||||
|
u := c.FormValue("user")
|
||||||
|
user := &User{}
|
||||||
|
err := json.Unmarshal([]byte(u), &user)
|
||||||
|
if err != nil {
|
||||||
|
return c.JSON(http.StatusBadRequest, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.ParamInvalid,
|
||||||
|
Message: ecode.ParamInvalidMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
err = validateProfile(user)
|
||||||
|
|
||||||
|
sess := GetSession(c)
|
||||||
|
q := misc.CQL.Query(`UPDATE user SET nickname=?,avatar=?,website=?,about=?,location=?,bg_color=?,
|
||||||
|
text_color=?,looking_for_work=?,education=?,employer=?,skills=?,available_for=?,working_exp=?,edit_date=? WHERE id=?`, user.NickName,
|
||||||
|
user.Avatar, user.Website, user.About, user.Location, user.BgColor, user.TextColor, user.LookingForWork, user.Education, user.Employer,
|
||||||
|
user.Skills, user.AvailableFor, user.WorkingExp, time.Now().Unix(), sess.ID)
|
||||||
|
err = q.Exec()
|
||||||
|
if err != nil {
|
||||||
|
misc.Log.Warn("access database error", zap.Error(err))
|
||||||
|
return c.JSON(http.StatusInternalServerError, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.DatabaseError,
|
||||||
|
Message: ecode.CommonErrorMsg,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if err != nil {
|
||||||
|
return c.JSON(http.StatusBadRequest, misc.HTTPResp{
|
||||||
|
ErrCode: ecode.ParamInvalid,
|
||||||
|
Message: err.Error(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return c.JSON(http.StatusOK, misc.HTTPResp{})
|
||||||
|
}
|
||||||
|
|
||||||
|
func validateProfile(user *User) error {
|
||||||
|
user.NickName = misc.Sanitizer.Sanitize(strings.TrimSpace(user.NickName))
|
||||||
|
if utf8.RuneCountInString(user.NickName) > 30 {
|
||||||
|
return errors.New("Display name too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.About = misc.Sanitizer.Sanitize(strings.TrimSpace(user.About))
|
||||||
|
if utf8.RuneCountInString(user.About) > 500 {
|
||||||
|
return errors.New("About too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.Website = misc.Sanitizer.Sanitize(strings.TrimSpace(user.Website))
|
||||||
|
if utf8.RuneCountInString(user.Website) > 30 || !validate.IsURL(user.Website) {
|
||||||
|
return errors.New("Website invalid or too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.Location = misc.Sanitizer.Sanitize(strings.TrimSpace(user.Location))
|
||||||
|
if utf8.RuneCountInString(user.Location) > 30 {
|
||||||
|
return errors.New("About too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.BgColor = strings.TrimSpace(user.BgColor)
|
||||||
|
if !validate.IsColor(user.BgColor) {
|
||||||
|
return errors.New("Invalid background color")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.TextColor = strings.TrimSpace(user.TextColor)
|
||||||
|
if !validate.IsColor(user.TextColor) {
|
||||||
|
return errors.New("Invalid text color")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.Education = misc.Sanitizer.Sanitize(strings.TrimSpace(user.Education))
|
||||||
|
if utf8.RuneCountInString(user.Education) > 500 {
|
||||||
|
return errors.New("Education too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.Employer = misc.Sanitizer.Sanitize(strings.TrimSpace(user.Employer))
|
||||||
|
if utf8.RuneCountInString(user.Employer) > 500 {
|
||||||
|
return errors.New("Employer too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.Skills = misc.Sanitizer.Sanitize(strings.TrimSpace(user.Skills))
|
||||||
|
if utf8.RuneCountInString(user.Skills) > 500 {
|
||||||
|
return errors.New("Skills too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.AvailableFor = misc.Sanitizer.Sanitize(strings.TrimSpace(user.AvailableFor))
|
||||||
|
if utf8.RuneCountInString(user.Employer) > 500 {
|
||||||
|
return errors.New("Available for too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
user.WorkingExp = misc.Sanitizer.Sanitize(strings.TrimSpace(user.WorkingExp))
|
||||||
|
if utf8.RuneCountInString(user.Employer) > 500 {
|
||||||
|
return errors.New("Working experience too long")
|
||||||
|
}
|
||||||
|
|
||||||
|
return nil
|
||||||
|
}
|
||||||
@ -1,171 +0,0 @@
|
|||||||
// layout
|
|
||||||
.margin-left-5 {
|
|
||||||
margin-left: 5px
|
|
||||||
}
|
|
||||||
.margin-left-10 {
|
|
||||||
margin-left: 10px
|
|
||||||
}
|
|
||||||
.margin-left-15 {
|
|
||||||
margin-left: 15px
|
|
||||||
}
|
|
||||||
.margin-left-20 {
|
|
||||||
margin-left: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-right-5 {
|
|
||||||
margin-right: 5px
|
|
||||||
}
|
|
||||||
.margin-right-10 {
|
|
||||||
margin-right: 10px
|
|
||||||
}
|
|
||||||
.margin-right-15 {
|
|
||||||
margin-right: 15px
|
|
||||||
}
|
|
||||||
.margin-right-20 {
|
|
||||||
margin-right: 20px
|
|
||||||
}
|
|
||||||
.margin-right-30 {
|
|
||||||
margin-right: 30px
|
|
||||||
}
|
|
||||||
.margin-right-40 {
|
|
||||||
margin-right: 40px
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-top-5 {
|
|
||||||
margin-top: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-top-10 {
|
|
||||||
margin-top: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-top-15 {
|
|
||||||
margin-top: 15px
|
|
||||||
}
|
|
||||||
|
|
||||||
.margin-top-20 {
|
|
||||||
margin-top: 20px !important
|
|
||||||
}
|
|
||||||
.margin-top-30 {
|
|
||||||
margin-top: 30px !important
|
|
||||||
}
|
|
||||||
.margin-top-40 {
|
|
||||||
margin-top: 40px !important
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-5 {
|
|
||||||
padding: 5px 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-10 {
|
|
||||||
padding: 10px 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-20 {
|
|
||||||
padding: 20px 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-left-5 {
|
|
||||||
padding-left: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-left-10 {
|
|
||||||
padding-left: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-left-15 {
|
|
||||||
padding-left: 15px
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.padding-left-20 {
|
|
||||||
padding-left: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-right-5 {
|
|
||||||
padding-right: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-right-10 {
|
|
||||||
padding-right: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-right-15 {
|
|
||||||
padding-right: 15px
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.padding-right-20 {
|
|
||||||
padding-right: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-top-5 {
|
|
||||||
padding-top: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-top-10 {
|
|
||||||
padding-top: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-top-15 {
|
|
||||||
padding-top: 15px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-top-20 {
|
|
||||||
padding-top: 20px
|
|
||||||
}
|
|
||||||
.padding-top-40 {
|
|
||||||
padding-top: 40px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-bottom-5 {
|
|
||||||
padding-bottom: 5px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-bottom-10 {
|
|
||||||
padding-bottom: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-bottom-15 {
|
|
||||||
padding-bottom: 15px
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.padding-bottom-20 {
|
|
||||||
padding-bottom: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding-bottom-40 {
|
|
||||||
padding-bottom: 40px
|
|
||||||
}
|
|
||||||
|
|
||||||
// 鼠标悬浮
|
|
||||||
.hover-cursor:hover{
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-right {
|
|
||||||
float: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-align-center {
|
|
||||||
text-align:center
|
|
||||||
}
|
|
||||||
|
|
||||||
.middle-inline {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-size-18 {
|
|
||||||
font-size:18px;
|
|
||||||
}
|
|
||||||
.font-size-20 {
|
|
||||||
font-size:18px;
|
|
||||||
}
|
|
||||||
.font-size-22 {
|
|
||||||
font-size:18px;
|
|
||||||
}
|
|
||||||
.font-size-24 {
|
|
||||||
font-size:18px;
|
|
||||||
}
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
.v-note-wrapper {
|
|
||||||
z-index: 10 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.scroll-style::-webkit-scrollbar {
|
|
||||||
width: 1px !important;
|
|
||||||
background: rgba(0, 0, 0, .1) !important;
|
|
||||||
} */
|
|
||||||
|
|
||||||
/* .v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.scroll-style::-webkit-scrollbar{
|
|
||||||
width: 2px !important;
|
|
||||||
background: rgba(0, 0, 0, .1) !important;
|
|
||||||
}
|
|
||||||
.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.scroll-style::-webkit-scrollbar-thumb{
|
|
||||||
border-radius: 1em;
|
|
||||||
background-color: rgba(50,50,50,.5);
|
|
||||||
}
|
|
||||||
.v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper.scroll-style::-webkit-scrollbar-track{
|
|
||||||
border-radius: 1em;
|
|
||||||
background-color: rgba(50,50,50,.1);
|
|
||||||
} */
|
|
||||||
|
|
||||||
.v-note-wrapper .v-note-panel {
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v-note-wrapper .v-note-op .v-right-item {
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
// overide global focus style
|
||||||
|
h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size:19px;
|
||||||
|
font-weight:500;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
font-size:17px;
|
||||||
|
font-weight:500;
|
||||||
|
margin-block-start: .5em;
|
||||||
|
margin-block-end: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus {
|
||||||
|
outline-color: transparent;
|
||||||
|
outline-width: 0;
|
||||||
|
outline-style: none;
|
||||||
|
}
|
||||||
|
input::-webkit-input-placeholder {
|
||||||
|
color: #aab2bd;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 2px !important;
|
||||||
|
height: 2px;
|
||||||
|
background-color: #e5e5e5 !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #b7b7b7 !important;
|
||||||
|
border-radius: 3px !important;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 0 0px #808080 inset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-border {
|
||||||
|
input {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-modal {
|
||||||
|
.el-dialog {
|
||||||
|
box-shadow: none !important;
|
||||||
|
position: absolute;
|
||||||
|
top: 45%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
|
.el-dialog__header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message.el-message--error.network-error {
|
||||||
|
top: 20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.el-message {
|
||||||
|
min-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-divider {
|
||||||
|
margin: 13px 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
@import './var.less';
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: @main-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button.el-button--info {
|
||||||
|
background-color: #f5f6f7;
|
||||||
|
color: @grey-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__wrapper.white-bg-modal {
|
||||||
|
background-color: rgba(255,255,255,.95);
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,20 +1,642 @@
|
|||||||
.el-dialog__wrapper.white-bg-modal {
|
@import './var.less';
|
||||||
background-color: rgba(255,255,255,.95);
|
.meta-word {
|
||||||
|
color:@grey-color;
|
||||||
|
}
|
||||||
|
.bold-meta-word {
|
||||||
|
color:@light-grey-color;
|
||||||
|
font-weight:700;
|
||||||
}
|
}
|
||||||
|
.border-bottom {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-regular {
|
||||||
|
color: @regular-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-nav {
|
||||||
|
.write-post {
|
||||||
|
text-decoration:none;color:black;background:#66e2d5;padding:2px 12px;border:2px solid #0a0a0a;border-radius:3px;font-weight:bold;font-size:14px
|
||||||
|
}
|
||||||
|
.sign-in-modal {
|
||||||
|
.el-dialog__header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 0 0;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
.sign-in-panel {
|
||||||
|
height: 100%;
|
||||||
|
background: url(../../assets/login.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-panel {
|
||||||
|
div {
|
||||||
|
cursor: pointer;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: all 0.6s;
|
||||||
|
}
|
||||||
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||||
|
// opacity: 0;
|
||||||
|
transform: translateY(-50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-leave-active,
|
||||||
|
.fade-enter-active {
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
.nav {
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(255, 255, 255, 0);
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
.post-huge-title {
|
// box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;
|
||||||
font-size: 36px;
|
padding-top: 8px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
.nav.toTop {
|
||||||
|
position: fixed;
|
||||||
|
// box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
background-color: white;
|
||||||
|
z-index: 999;
|
||||||
|
// transition:transform 300ms ease;
|
||||||
|
// transform: translateY(100px)
|
||||||
|
}
|
||||||
|
.nav.inTop {
|
||||||
|
// box-shadow: rgba(0, 0, 0, 0.0470588) 0px 4px 12px 0px;;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.meta-word {
|
.article-detail {
|
||||||
font-size:12px;
|
.discuss {
|
||||||
color:rgb(124,124,124);
|
background-color: #fafafa
|
||||||
|
}
|
||||||
|
.squares {
|
||||||
|
.square {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 25px;
|
||||||
|
a {
|
||||||
|
color: rgba(0,0,0,.8)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clap {
|
||||||
|
position: relative;
|
||||||
|
outline: 1px solid transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #bdc3c7;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.clap:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: block;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 59px;
|
||||||
|
height: 59px;
|
||||||
|
}
|
||||||
|
.clap:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid #333;
|
||||||
|
transition: border-color 0.3s ease-in;
|
||||||
|
}
|
||||||
|
.clap:hover:after {
|
||||||
|
animation: shockwave 1s ease-in infinite;
|
||||||
|
}
|
||||||
|
.clap svg {
|
||||||
|
width: 30px;
|
||||||
|
fill: none;
|
||||||
|
stroke: #333;
|
||||||
|
stroke-width: 1px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.clap.liked {
|
||||||
|
border: 1px solid #333;
|
||||||
|
}
|
||||||
|
.clap.liked svg {
|
||||||
|
stroke: #333;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
.clap svg.checked {
|
||||||
|
fill: #333;
|
||||||
|
stroke: #fff;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
@keyframes shockwave {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
box-shadow: 0 0 2px #333;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 0;
|
||||||
|
box-shadow: 0 0 50px #145b32, inset 0 0 10px #333
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bold-meta-word {
|
.article-edit {
|
||||||
color:rgb(135, 138, 140);
|
.render {
|
||||||
font-weight:700;
|
border:1px solid #eee;border-bottom:none;border-right:none;
|
||||||
font-size:12px;
|
}
|
||||||
|
.tags {
|
||||||
|
.el-input.el-input--suffix input{
|
||||||
|
background-color: #f5f6f7;
|
||||||
|
border-radius: 100px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.component-render {
|
||||||
|
.content p {
|
||||||
|
margin: 0 0 8px
|
||||||
|
}
|
||||||
|
.content blockquote h1:last-child,
|
||||||
|
.content blockquote h2:last-child,
|
||||||
|
.content blockquote h3:last-child,
|
||||||
|
.content blockquote h4:last-child,
|
||||||
|
.content blockquote h5:last-child,
|
||||||
|
.content blockquote h6:last-child,
|
||||||
|
.content blockquote li:last-child,
|
||||||
|
.content blockquote ol:last-child,
|
||||||
|
.content blockquote p:last-child,
|
||||||
|
.content blockquote ul:last-child {
|
||||||
|
margin-bottom: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-description p {
|
||||||
|
margin: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.content li p {
|
||||||
|
overflow: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
.content a {
|
||||||
|
color: rgba(0, 0, 0, .84);
|
||||||
|
text-decoration: none;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .68) 50%, rgba(0, 0, 0, 0) 50%);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-size: 2px .2em;
|
||||||
|
background-position: 0 1.07em
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* .content a:hover {
|
||||||
|
color: #3194d0;
|
||||||
|
text-decoration: underline
|
||||||
|
} */
|
||||||
|
|
||||||
|
|
||||||
|
/* .content a.active,
|
||||||
|
.content a:active,
|
||||||
|
.content a:focus {
|
||||||
|
color: #3194d0
|
||||||
|
} */
|
||||||
|
|
||||||
|
.content a.disabled,
|
||||||
|
.content a.disabled.active,
|
||||||
|
.content a.disabled:active,
|
||||||
|
.content a.disabled:focus,
|
||||||
|
.content a.disabled:hover,
|
||||||
|
.content a[disabled],
|
||||||
|
.content a[disabled].active,
|
||||||
|
.content a[disabled]:active,
|
||||||
|
.content a[disabled]:focus,
|
||||||
|
.content a[disabled]:hover {
|
||||||
|
cursor: not-allowed;
|
||||||
|
color: #f5f5f5
|
||||||
|
}
|
||||||
|
|
||||||
|
.content ol,
|
||||||
|
.content p,
|
||||||
|
.content ul {
|
||||||
|
word-break: break-word!important;
|
||||||
|
word-break: break-all
|
||||||
|
}
|
||||||
|
|
||||||
|
.content hr {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
border-top: 1px solid #ddd
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1,
|
||||||
|
.content h2,
|
||||||
|
.content h3,
|
||||||
|
.content h4,
|
||||||
|
.content h5,
|
||||||
|
.content h6 {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2f2f2f;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-rendering: optimizelegibility
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h1 {
|
||||||
|
font-size: 26px
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h2 {
|
||||||
|
font-size: 24px
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h3 {
|
||||||
|
font-size: 22px
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h4 {
|
||||||
|
font-size: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h5 {
|
||||||
|
font-size: 18px
|
||||||
|
}
|
||||||
|
|
||||||
|
.content h6 {
|
||||||
|
font-size: 16px
|
||||||
|
}
|
||||||
|
|
||||||
|
.content img {
|
||||||
|
max-width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.content blockquote {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 18px !important;
|
||||||
|
color: rgba(0, 0, 0, .68);
|
||||||
|
padding-left: 25px;
|
||||||
|
padding-top:4px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
box-shadow:rgba(0, 0, 0, 0.843137) 3px 0px 0px 0px inset;
|
||||||
|
margin-inline-start: 0px !important;
|
||||||
|
margin-inline-end: 0px !important;
|
||||||
|
margin-left:-20px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.content ol .image-package,
|
||||||
|
.content ul .image-package {
|
||||||
|
width: auto!important;
|
||||||
|
margin-left: 0!important
|
||||||
|
}
|
||||||
|
|
||||||
|
.content code {
|
||||||
|
background: rgba(0, 0, 0, .05);
|
||||||
|
padding: 3px 4px;
|
||||||
|
margin: 0 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content pre {
|
||||||
|
font-size: 14px;
|
||||||
|
word-wrap: normal;
|
||||||
|
word-break: break-word!important;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: pre;
|
||||||
|
overflow: auto;
|
||||||
|
border-radius: 0;
|
||||||
|
/* border: .3px solid #ddd;*/
|
||||||
|
page-break-inside: avoid;
|
||||||
|
display: block;
|
||||||
|
/* line-height: 1.42857; */
|
||||||
|
color: #333;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-radius: 4px;
|
||||||
|
line-height: 27px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content pre code {
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
/* white-space: pre */
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
background-color: transparent;
|
||||||
|
border-radius: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 0px solid #ddd;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-left: none;
|
||||||
|
word-break: normal;
|
||||||
|
display: table;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table tr:nth-of-type(2n) {
|
||||||
|
background-color: rgba(243, 243, 243, 0.3)
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table thead th {
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: left;
|
||||||
|
color: rgba(0, 0, 0, .64);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table tr {
|
||||||
|
border-top: .3px solid #ddd;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table thead tr {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table td,
|
||||||
|
.content table th {
|
||||||
|
padding: 12px 8px;
|
||||||
|
border: 0px solid #ddd;
|
||||||
|
line-height: 20px;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table th {
|
||||||
|
font-weight: 500
|
||||||
|
}
|
||||||
|
|
||||||
|
.content table .image-package {
|
||||||
|
width: auto;
|
||||||
|
margin-left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .image-package .image-container {
|
||||||
|
z-index: 100;
|
||||||
|
position: relative;
|
||||||
|
background-color: #eee;
|
||||||
|
transition: background-color .1s linear;
|
||||||
|
margin: 0 auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .image-package .image-container .image-container-fill {
|
||||||
|
z-index: 50
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .image-package .image-container .image-view {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .image-package .image-container .image-view img.image-loading {
|
||||||
|
will-change: filter, opacity;
|
||||||
|
-webkit-filter: blur(4px);
|
||||||
|
filter: blur(4px);
|
||||||
|
opacity: .3
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .image-package .image-container .image-view img {
|
||||||
|
transition: all .15s linear;
|
||||||
|
z-index: 100;
|
||||||
|
will-change: filter, opacity;
|
||||||
|
-webkit-filter: blur(0);
|
||||||
|
filter: blur(0);
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
cursor: -webkit-zoom-in;
|
||||||
|
transition: all .25s ease-in-out
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.content .image-package .image-caption:empty {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package {
|
||||||
|
position: relative;
|
||||||
|
margin: -20px auto 20px;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-placeholder-area {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
height: 110px;
|
||||||
|
padding: 10px;
|
||||||
|
padding-left: 120px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
background-color: hsla(0, 0%, 71%, .1);
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-placeholder-area:after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
display: block;
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
background-color: rgba(0, 0, 0, .3);
|
||||||
|
background-image: url(//cdn2.jianshu.io/assets/common/play-btn-c4bc06b9dfe063495b6b8277b14bc5c3.png);
|
||||||
|
background-position: 30px;
|
||||||
|
background-size: 50px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
transition: all .1s linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-placeholder-area:hover:after {
|
||||||
|
background-color: transparent
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-placeholder-area .video-cover {
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: -1px;
|
||||||
|
display: block;
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
opacity: .8;
|
||||||
|
transition: opacity .1s linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-description {
|
||||||
|
min-width: 20%;
|
||||||
|
min-height: 22px;
|
||||||
|
display: none;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 1px solid #d9d9d9;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
line-height: 1.7
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-description:empty {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-close-button,
|
||||||
|
.content .video-package .video-provider-button {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0;
|
||||||
|
line-height: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity .1s linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-close-button i,
|
||||||
|
.content .video-package .video-provider-button i {
|
||||||
|
position: relative;
|
||||||
|
top: 1px
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .video-package .video-provider-button {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .hljs {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .hljs-center {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .hljs-right {
|
||||||
|
text-align: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .hljs-left {
|
||||||
|
text-align: left
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.component-editor {
|
||||||
|
.v-note-wrapper {
|
||||||
|
z-index: 10 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-note-wrapper .v-note-panel {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-note-wrapper .v-note-op .v-right-item {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.setting-nav {
|
||||||
|
.header {
|
||||||
|
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
padding: 15px 12px 8px;
|
||||||
|
}
|
||||||
|
.item.selected {
|
||||||
|
border-bottom: solid 3px #cfd7ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.discuss {
|
||||||
|
.write-comment {
|
||||||
|
.header-buttons {
|
||||||
|
margin-top:-190px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.comments {
|
||||||
|
padding-bottom:30px
|
||||||
|
}
|
||||||
|
.no-comments {
|
||||||
|
.iconfont {
|
||||||
|
color:rgba(0, 121, 211, 0.4);font-size: 30px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sorter {
|
||||||
|
color:@grey-color;
|
||||||
|
|
||||||
|
}
|
||||||
|
.comments {
|
||||||
|
background:white;
|
||||||
|
padding:5px 25px;
|
||||||
|
margin-top:0px;
|
||||||
|
.comment {
|
||||||
|
i.vote-highlighted {
|
||||||
|
color: rgb(255, 69, 0);
|
||||||
|
}
|
||||||
|
.upvote {
|
||||||
|
position:absolute;
|
||||||
|
margin-left:-21px;
|
||||||
|
margin-top:-2px;
|
||||||
|
color: @light-grey-color;
|
||||||
|
font-size:10px
|
||||||
|
}
|
||||||
|
.downvote {
|
||||||
|
position:absolute;
|
||||||
|
margin-left:-21px;
|
||||||
|
margin-top:9px;
|
||||||
|
color:@light-grey-color;
|
||||||
|
font-size:10px
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
color:rgb(124,124,124);
|
||||||
|
.uname {
|
||||||
|
color:rgb(0, 121, 211);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
color:@light-grey-color;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-note-wrapper {
|
||||||
|
min-height: 150px !important;
|
||||||
|
.v-note-op.shadow {
|
||||||
|
box-shadow: none;
|
||||||
|
border-bottom: 1px solid #efefef
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
font-size:13px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.reply-comment {
|
||||||
|
.v-note-wrapper {
|
||||||
|
border:1px solid #eee
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,8 +1,5 @@
|
|||||||
@text-default-color: rgba(0, 0, 0, .84);
|
@grey-color: rgb(124,124,124);
|
||||||
@text-second-color: rgba(0, 0, 0, .54);
|
@light-grey-color: rgb(135, 138, 140);
|
||||||
@nav-color: rgba(0,0,0,.70);
|
|
||||||
@text-enter-more-color: rgb(150, 150, 150);
|
@main-color: #303133;
|
||||||
@text-annotation-color: rgb(180, 180, 180);
|
@regular-color: #606266;
|
||||||
@topic-text-color: white;
|
|
||||||
@topic-annotation-color: rgba(255, 255, 255, .7);
|
|
||||||
@menu-item-active-color: #f0f0f0;
|
|
||||||
@ -1,385 +0,0 @@
|
|||||||
.render .content p {
|
|
||||||
margin: 0 0 8px
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.render .content blockquote h1:last-child,
|
|
||||||
.render .content blockquote h2:last-child,
|
|
||||||
.render .content blockquote h3:last-child,
|
|
||||||
.render .content blockquote h4:last-child,
|
|
||||||
.render .content blockquote h5:last-child,
|
|
||||||
.render .content blockquote h6:last-child,
|
|
||||||
.render .content blockquote li:last-child,
|
|
||||||
.render .content blockquote ol:last-child,
|
|
||||||
.render .content blockquote p:last-child,
|
|
||||||
.render .content blockquote ul:last-child {
|
|
||||||
margin-bottom: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-description p {
|
|
||||||
margin: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content li p {
|
|
||||||
overflow: visible
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content a {
|
|
||||||
color: rgba(0, 0, 0, .84);
|
|
||||||
text-decoration: none;
|
|
||||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, .68) 50%, rgba(0, 0, 0, 0) 50%);
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
background-size: 2px .2em;
|
|
||||||
background-position: 0 1.07em
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* .render .content a:hover {
|
|
||||||
color: #3194d0;
|
|
||||||
text-decoration: underline
|
|
||||||
} */
|
|
||||||
|
|
||||||
|
|
||||||
/* .render .content a.active,
|
|
||||||
.render .content a:active,
|
|
||||||
.render .content a:focus {
|
|
||||||
color: #3194d0
|
|
||||||
} */
|
|
||||||
|
|
||||||
.render .content a.disabled,
|
|
||||||
.render .content a.disabled.active,
|
|
||||||
.render .content a.disabled:active,
|
|
||||||
.render .content a.disabled:focus,
|
|
||||||
.render .content a.disabled:hover,
|
|
||||||
.render .content a[disabled],
|
|
||||||
.render .content a[disabled].active,
|
|
||||||
.render .content a[disabled]:active,
|
|
||||||
.render .content a[disabled]:focus,
|
|
||||||
.render .content a[disabled]:hover {
|
|
||||||
cursor: not-allowed;
|
|
||||||
color: #f5f5f5
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content ol,
|
|
||||||
.render .content p,
|
|
||||||
.render .content ul {
|
|
||||||
word-break: break-word!important;
|
|
||||||
word-break: break-all
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content hr {
|
|
||||||
margin: 0 0 20px;
|
|
||||||
border-top: 1px solid #ddd
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content h1,
|
|
||||||
.render .content h2,
|
|
||||||
.render .content h3,
|
|
||||||
.render .content h4,
|
|
||||||
.render .content h5,
|
|
||||||
.render .content h6 {
|
|
||||||
margin: 0 0 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #2f2f2f;
|
|
||||||
line-height: 1.6;
|
|
||||||
text-rendering: optimizelegibility
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content h1 {
|
|
||||||
font-size: 26px
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content h2 {
|
|
||||||
font-size: 24px
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content h3 {
|
|
||||||
font-size: 22px
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content h4 {
|
|
||||||
font-size: 20px
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content h5 {
|
|
||||||
font-size: 18px
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content h6 {
|
|
||||||
font-size: 16px
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content img {
|
|
||||||
max-width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content blockquote {
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 18px !important;
|
|
||||||
color: rgba(0, 0, 0, .68);
|
|
||||||
padding-left: 25px;
|
|
||||||
padding-top:4px;
|
|
||||||
padding-bottom: 4px;
|
|
||||||
box-shadow:rgba(0, 0, 0, 0.843137) 3px 0px 0px 0px inset;
|
|
||||||
margin-inline-start: 0px !important;
|
|
||||||
margin-inline-end: 0px !important;
|
|
||||||
margin-left:-20px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.render .content ol .image-package,
|
|
||||||
.render .content ul .image-package {
|
|
||||||
width: auto!important;
|
|
||||||
margin-left: 0!important
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content code {
|
|
||||||
background: rgba(0, 0, 0, .05);
|
|
||||||
padding: 3px 4px;
|
|
||||||
margin: 0 2px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content pre {
|
|
||||||
font-size: 14px;
|
|
||||||
word-wrap: normal;
|
|
||||||
word-break: break-word!important;
|
|
||||||
word-break: break-all;
|
|
||||||
white-space: pre;
|
|
||||||
overflow: auto;
|
|
||||||
border-radius: 0;
|
|
||||||
/* border: .3px solid #ddd;*/
|
|
||||||
page-break-inside: avoid;
|
|
||||||
display: block;
|
|
||||||
/* line-height: 1.42857; */
|
|
||||||
color: #333;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
border-radius: 4px;
|
|
||||||
line-height: 27px;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content pre code {
|
|
||||||
padding: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
/* white-space: pre */
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table {
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border: 0px solid #ddd;
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-left: none;
|
|
||||||
word-break: normal;
|
|
||||||
display: table;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table tr:nth-of-type(2n) {
|
|
||||||
background-color: rgba(243, 243, 243, 0.3)
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table thead th {
|
|
||||||
vertical-align: middle;
|
|
||||||
text-align: left;
|
|
||||||
color: rgba(0, 0, 0, .64);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table tr {
|
|
||||||
border-top: .3px solid #ddd;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table thead tr {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table td,
|
|
||||||
.render .content table th {
|
|
||||||
padding: 12px 8px;
|
|
||||||
border: 0px solid #ddd;
|
|
||||||
line-height: 20px;
|
|
||||||
vertical-align: middle
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table th {
|
|
||||||
font-weight: 500
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content table .image-package {
|
|
||||||
width: auto;
|
|
||||||
margin-left: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .image-package .image-container {
|
|
||||||
z-index: 100;
|
|
||||||
position: relative;
|
|
||||||
background-color: #eee;
|
|
||||||
transition: background-color .1s linear;
|
|
||||||
margin: 0 auto
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .image-package .image-container .image-container-fill {
|
|
||||||
z-index: 50
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .image-package .image-container .image-view {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .image-package .image-container .image-view img.image-loading {
|
|
||||||
will-change: filter, opacity;
|
|
||||||
-webkit-filter: blur(4px);
|
|
||||||
filter: blur(4px);
|
|
||||||
opacity: .3
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .image-package .image-container .image-view img {
|
|
||||||
transition: all .15s linear;
|
|
||||||
z-index: 100;
|
|
||||||
will-change: filter, opacity;
|
|
||||||
-webkit-filter: blur(0);
|
|
||||||
filter: blur(0);
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.render .content img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
border: 0;
|
|
||||||
cursor: -webkit-zoom-in;
|
|
||||||
transition: all .25s ease-in-out
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.render .content .image-package .image-caption:empty {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package {
|
|
||||||
position: relative;
|
|
||||||
margin: -20px auto 20px;
|
|
||||||
text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-placeholder-area {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
height: 110px;
|
|
||||||
padding: 10px;
|
|
||||||
padding-left: 120px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 1px solid #d9d9d9;
|
|
||||||
background-color: hsla(0, 0%, 71%, .1);
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-placeholder-area:after {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
display: block;
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
background-image: url(//cdn2.jianshu.io/assets/common/play-btn-c4bc06b9dfe063495b6b8277b14bc5c3.png);
|
|
||||||
background-position: 30px;
|
|
||||||
background-size: 50px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
transition: all .1s linear
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-placeholder-area:hover:after {
|
|
||||||
background-color: transparent
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-placeholder-area .video-cover {
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: -1px;
|
|
||||||
display: block;
|
|
||||||
width: 110px;
|
|
||||||
height: 110px;
|
|
||||||
opacity: .8;
|
|
||||||
transition: opacity .1s linear
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-description {
|
|
||||||
min-width: 20%;
|
|
||||||
min-height: 22px;
|
|
||||||
display: none;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-bottom: 1px solid #d9d9d9;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #999;
|
|
||||||
line-height: 1.7
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-description:empty {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-close-button,
|
|
||||||
.render .content .video-package .video-provider-button {
|
|
||||||
text-align: left;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0;
|
|
||||||
line-height: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity .1s linear
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-close-button i,
|
|
||||||
.render .content .video-package .video-provider-button i {
|
|
||||||
position: relative;
|
|
||||||
top: 1px
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .video-package .video-provider-button {
|
|
||||||
float: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .hljs {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .hljs-center {
|
|
||||||
text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .hljs-right {
|
|
||||||
text-align: right
|
|
||||||
}
|
|
||||||
|
|
||||||
.render .content .hljs-left {
|
|
||||||
text-align: left
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,67 +1,75 @@
|
|||||||
// overide global focus style
|
/* ----------------------------margin------------------------ */
|
||||||
:focus {
|
.margin-0-auto { margin: 0 auto}
|
||||||
outline-color: transparent;
|
|
||||||
outline-width: 0;
|
|
||||||
outline-style: none;
|
|
||||||
}
|
|
||||||
input::-webkit-input-placeholder {
|
|
||||||
color: #aab2bd;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
.margin-left-5 {margin-left: 5px};.margin-left-10 {margin-left: 10px};.margin-left-15 {margin-left: 15px};.margin-left-20 {margin-left: 20px};.margin-left-30 {margin-left: 30px};.margin-left-40 {margin-left: 40px};.margin-left-50 {margin-left: 50px};.margin-left-60 {margin-left: 60px};
|
||||||
width: 2px !important;
|
.margin-left--20 {margin-left: -20px};
|
||||||
height: 2px;
|
|
||||||
background-color: #e5e5e5 !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #b7b7b7 !important;
|
|
||||||
border-radius: 3px !important;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: 0 0 0px #808080 inset !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-border {
|
.margin-right-5 {margin-right: 5px};.margin-right-10 {margin-right: 10px};.margin-right-15 {margin-right: 15px};.margin-right-20 {margin-right: 20px};.margin-right-30 {margin-right: 30px};.margin-right-40 {margin-right: 40px};
|
||||||
input {
|
|
||||||
border: none;
|
.margin-top-2 {margin-top: 2px};.margin-top-5 {margin-top: 5px};.margin-top-8 {margin-top: 8px};.margin-top-10 {margin-top: 10px};.margin-top-15 {margin-top: 15px};.margin-top-20 {margin-top: 20px};.margin-top-25 {margin-top: 25px};.margin-top-30 {margin-top: 30px};.margin-top-40 {margin-top: 40px};.margin-top-60 {margin-top: 60px};.margin-top-80 {margin-top: 80px};.margin-top-100 {margin-top: 100px};
|
||||||
}
|
.margin-top--35 {margin-top: -35px};.margin-top--40 {margin-top: -40px};.margin-top--50 {margin-top: -50px};
|
||||||
button {
|
|
||||||
border:none;
|
.margin-bottom-5 {margin-bottom: 5px};.margin-bottom-10 {margin-bottom: 10px};.margin-bottom-15 {margin-bottom: 15px};.margin-bottom-20 { margin-bottom: 20px}.margin-bottom-30 {margin-bottom: 30px };.margin-bottom-40 {margin-bottom: 40px };.margin-bottom-50 {margin-bottom: 50px };
|
||||||
}
|
|
||||||
}
|
/* ----------------------------padding------------------------ */
|
||||||
|
.padding-5 {padding: 5px 5px};.padding-10 { padding: 10px 10px};.padding-20 {padding: 20px 20px};
|
||||||
|
|
||||||
|
.padding-left-5 {padding-left: 5px};.padding-left-10 {padding-left: 10px};.padding-left-15 {padding-left: 15px};.padding-left-20 {padding-left: 20px};
|
||||||
|
|
||||||
|
.padding-right-5 {padding-right: 5px}.padding-right-10 {padding-right: 10px};.padding-right-15 {padding-right: 15px};.padding-right-20 {padding-right: 20px};
|
||||||
|
|
||||||
|
.padding-top-5 {padding-top: 5px};.padding-top-10 {padding-top: 10px};.padding-top-15 {padding-top: 15px};.padding-top-20 {padding-top: 20px};.padding-top-40 {padding-top: 40px};.padding-top-60 {padding-top: 60px};
|
||||||
|
|
||||||
|
.padding-bottom-5 { padding-bottom: 5px};.padding-bottom-10 {padding-bottom: 10px};.padding-bottom-15 {padding-bottom: 15px};.padding-bottom-20 {padding-bottom: 20px};.padding-bottom-30 {padding-bottom: 30px};.padding-bottom-40 {padding-bottom: 40px};
|
||||||
|
|
||||||
.border-ellipse{
|
/* ----------------------------height/width------------------------ */
|
||||||
border-radius: 100px;
|
.height-45{height:45px};.height-50{height:50px};.height-100{height:100px};.height-150{height:150px};.height-200{height:200px};
|
||||||
|
|
||||||
|
.width-50{width:50px};.width-100{width:100px};.width-150{width:150px};.width-200{width:200px};.width-300{width:300px};
|
||||||
|
|
||||||
|
.width-100p {width: 100%};
|
||||||
|
|
||||||
|
.max-width-300 {width: 300px}
|
||||||
|
|
||||||
|
/* ----------------------------font------------------------ */
|
||||||
|
.font-size-12 {font-size:12px;};.font-size-13 {font-size:13px;};.font-size-14 {font-size:14px;};.font-size-15 {font-size:15px;};.font-size-16 {font-size:16px;};.font-size-18 {font-size:18px;};.font-size-20 {font-size:20px;};.font-size-22 {font-size:22px;};.font-size-24 {font-size:24px;};
|
||||||
|
|
||||||
|
.font-weight-500 {font-weight: 500;};.font-weight-bold {font-weight: bold;}
|
||||||
|
|
||||||
|
/* ----------------------------position------------------------ */
|
||||||
|
.position-fixed {position: fixed};.position-absolute {position: absolute};.position-relative{position: relative};
|
||||||
|
|
||||||
|
/* ----------------------------z-index------------------------ */
|
||||||
|
.z-index-1 {z-index: 1};.z-index-100 {z-index: 100};.z-index-1000 {z-index: 1000};
|
||||||
|
|
||||||
|
/* ----------------------------border------------------------ */
|
||||||
|
.border-none {border:noen};.border-top-none{border-top: none};.border-bottom-none{border-bottom: none};.border-left-none{border-left: none};.border-right-none{border-right: none};
|
||||||
|
|
||||||
|
.border-radius-3{border-radius: 3px};.border-radius-100{border-radius: 100px};
|
||||||
|
|
||||||
|
// 鼠标悬浮
|
||||||
|
.cursor-pointer:hover {
|
||||||
|
cursor: pointer
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-grey {
|
.float-right {
|
||||||
background-color: #f5f6f7
|
float: right
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-modal {
|
.text-align-center {
|
||||||
.el-dialog {
|
text-align:center
|
||||||
box-shadow: none !important;
|
}
|
||||||
position: absolute;
|
.vertical-align-middle {
|
||||||
top: 45%;
|
vertical-align: middle;
|
||||||
left: 50%;
|
}
|
||||||
transform: translate(-50%, -50%);
|
.display-inline-block {
|
||||||
cursor: zoom-out;
|
display: inline-block;
|
||||||
}
|
|
||||||
.el-dialog__header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.el-dialog__body {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-light-grey {
|
.overflow-y-auto{
|
||||||
background-color: #fafafa!important
|
overflow-y: auto
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-message.el-message--error.network-error {
|
.text-decoration-none {
|
||||||
top: 20px !important;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<div class="user-card padding-10" :style="{'border': '1px solid ' + user.text_color,'box-shadow':'1px 1px 0px ' +user.text_color }">
|
||||||
|
<div>
|
||||||
|
<el-avatar
|
||||||
|
:src="user.avatar"
|
||||||
|
slot="reference"
|
||||||
|
class="display-inline-block vertical-align-middle cursor-pointer"
|
||||||
|
@click.native="userHome"
|
||||||
|
></el-avatar>
|
||||||
|
<router-link :to="'/' + user.name" class="position-absolute margin-left-10 font-weight-500 cursor-pointer text-decoration-none">{{user.nickname}}</router-link>
|
||||||
|
<router-link :to="'/' + user.name" class="position-absolute margin-top-25 margin-left-10 font-size-14 cursor-pointer text-decoration-none">@{{user.name}}</router-link >
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-15 margin-left-10" v-html="user.about" v-if="user.about!='' && user.about!=undefined">
|
||||||
|
</div>
|
||||||
|
<div class="text-align-center padding-top-10 padding-bottom-10 font-weight-bold border-radius-3 cursor-pointer margin-top-10" :style="{'background-color':user.bg_color,'color':user.text_color}">FOLLOW</div>
|
||||||
|
|
||||||
|
<div class="margin-top-10 margin-left-10" v-if="user.website!='' && user.website!=undefined">
|
||||||
|
<div class="color-regular font-weight-500">website</div>
|
||||||
|
<div>{{user.website}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin-top-10 margin-left-10" v-if="user.employer!='' && user.employer!=undefined">
|
||||||
|
<div class="color-regular font-weight-500">work</div>
|
||||||
|
<div v-html="user.employer"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin-top-10 margin-left-10" v-if="user.education!='' && user.education!=undefined">
|
||||||
|
<div class="color-regular font-weight-500">education</div>
|
||||||
|
<div v-html="user.education"></div>
|
||||||
|
</div>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row class="margin-top-10 padding-left-10 padding-right-10">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="color-regular font-weight-500">location</div>
|
||||||
|
<div><i class="el-icon-location" :style="{color:user.text_color}"></i><span class="font-size-14">{{user.location}}</span></div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="color-regular font-weight-500">joined</div>
|
||||||
|
<div><i class="el-icon-date margin-right-5" :style="{color:user.text_color}"></i><span class="font-size-14">{{user.create_date}}</span></div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "@/utils/request";
|
||||||
|
export default {
|
||||||
|
props: ['user'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
userHome() {
|
||||||
|
this.$router.push('/' + this.user.name)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div class="setting-account margin-top-20">
|
||||||
|
<el-card shadow="hover">
|
||||||
|
<div>aaaa</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "@/utils/request";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div class="setting-nav">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="20" :offset="2">
|
||||||
|
<div class="header padding-bottom-10 border-bottom" >
|
||||||
|
<h3 class="big-title margin-bottom-30"><i class="el-icon-s-tools margin-right-10"></i>User Settings</h3>
|
||||||
|
<span v-for="i in items" :key="i" :class="{'selected': selItem==i,'meta-word':selItem!=i}" class="cursor-pointer item font-weight-500" @click="selectItem(i)">{{names[i]}}</span>
|
||||||
|
</div>
|
||||||
|
<router-view></router-view>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
level: {},
|
||||||
|
|
||||||
|
path : '',
|
||||||
|
selItem : '',
|
||||||
|
|
||||||
|
|
||||||
|
appNames: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route() {
|
||||||
|
this.initItem()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectItem(i) {
|
||||||
|
this.$router.push('/dev/setting/' + i)
|
||||||
|
},
|
||||||
|
initItem() {
|
||||||
|
this.path = window.location.pathname
|
||||||
|
this.items = ['account','profile']
|
||||||
|
this.level = {account:2,profile:2}
|
||||||
|
this.names = {account: 'Account',profile:'Profile'}
|
||||||
|
this.selItem = this.path.split('/')[3]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initItem()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<div class="setting-profile margin-top-20">
|
||||||
|
<el-row v-if="user.id!=undefined">
|
||||||
|
<el-col :span="13" class="padding-left-20 padding-right-20">
|
||||||
|
<div>
|
||||||
|
<h4>Display name</h4>
|
||||||
|
<div class="meta-word font-size-12">Set a display name. This does not change your username.</div>
|
||||||
|
<el-input size="medium" class="margin-top-5 margin-bottom-5" v-model="user.nickname" :maxlength="30"></el-input>
|
||||||
|
<div class="meta-word font-size-12">{{30-user.nickname.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>About</h4>
|
||||||
|
<div class="meta-word font-size-12">A brief description of yourself shown on your profile.</div>
|
||||||
|
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.about" :maxlength="500"></el-input>
|
||||||
|
<div class="meta-word font-size-12">{{500-user.about.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>Website url</h4>
|
||||||
|
<el-input size="medium" placeholder="https://yoursite.com" v-model="user.website" :maxlength="30"></el-input>
|
||||||
|
<div class="meta-word font-size-12 margin-top-5">{{30-user.website.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>Location </h4>
|
||||||
|
<el-input size="medium" placeholder="Your location" v-model="user.location" :maxlength="30"></el-input>
|
||||||
|
<div class="meta-word font-size-12 margin-top-5">{{30-user.location.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-30">
|
||||||
|
<h4>Background color</h4>
|
||||||
|
<el-color-picker class="position-absolute" size="small" v-model="user.bg_color"></el-color-picker>
|
||||||
|
<span class="meta-word font-size-12 margin-left-40">The background color used in your home page</span>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-30 margin-bottom-50">
|
||||||
|
<h4>Text color </h4>
|
||||||
|
<el-color-picker class="position-absolute" size="small" v-model="user.text_color"></el-color-picker>
|
||||||
|
<span class="meta-word font-size-12 margin-left-40">The text color used in your home page</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-divider content-position="left" >Job/Working</el-divider>
|
||||||
|
<div class="margin-top-40">
|
||||||
|
<h4>Education</h4>
|
||||||
|
<div class="meta-word font-size-12">A brief description of your education.</div>
|
||||||
|
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.education" :maxlength="500"></el-input>
|
||||||
|
<div class="meta-word font-size-12">{{500-user.education.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>Employer</h4>
|
||||||
|
<div class="meta-word font-size-12">e.g : Development Team Leader at <a href="https://google.com">Google</a></div>
|
||||||
|
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.employer" :maxlength="500"></el-input>
|
||||||
|
<div class="meta-word font-size-12">{{500-user.employer.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>Skills </h4>
|
||||||
|
<div class="meta-word font-size-12">What programming skills do you have? Are your a expert?</div>
|
||||||
|
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.skills" :maxlength="500"></el-input>
|
||||||
|
<div class="meta-word font-size-12">{{500-user.skills.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>Working Experience</h4>
|
||||||
|
<div class="meta-word font-size-12">Your working experience and the projects you participated</div>
|
||||||
|
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.working_exp" :maxlength="500"></el-input>
|
||||||
|
<div class="meta-word font-size-12">{{500-user.working_exp.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>Available for</h4>
|
||||||
|
<div class="meta-word font-size-12">What kinds of collaborations or works are you available for?</div>
|
||||||
|
<el-input type="textarea" class="margin-top-5 margin-bottom-5" v-model="user.available_for" :maxlength="500"></el-input>
|
||||||
|
<div class="meta-word font-size-12">{{500-user.available_for.length}} Characters</div>
|
||||||
|
</div>
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<h4>Looking for work</h4>
|
||||||
|
|
||||||
|
<el-switch
|
||||||
|
class="position-absolute"
|
||||||
|
v-model="user.lfw"
|
||||||
|
active-color="#13ce66">
|
||||||
|
</el-switch>
|
||||||
|
<span class="meta-word font-size-12 margin-left-50">Are you looking for a work now?</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="margin-top-20">
|
||||||
|
<el-button type="primary" @click="setProfile">SUBMIT</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" :offset="1">
|
||||||
|
<UserCard :user="user"></UserCard>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import request from "@/utils/request";
|
||||||
|
import UserCard from "../components/user-card";
|
||||||
|
export default {
|
||||||
|
components: {UserCard},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
user: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
"$store.state.user.id"() {
|
||||||
|
if (this.$store.state.user.id != '') {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setProfile() {
|
||||||
|
request({
|
||||||
|
url: "/user/profile/set",
|
||||||
|
method: "POST",
|
||||||
|
params: {
|
||||||
|
user: JSON.stringify(this.user)
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
this.$message.success("Saved")
|
||||||
|
});
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
request({
|
||||||
|
url: "/user/profile",
|
||||||
|
method: "GET",
|
||||||
|
params: {
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
this.user = res.data.data
|
||||||
|
if (this.user.lfw ==0) {
|
||||||
|
this.user.lfw = false
|
||||||
|
} else {
|
||||||
|
this.user.lfw = true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
Loading…
Reference in new issue