zq
4 months ago
35 changed files with 75 additions and 1742 deletions
@ -1,62 +0,0 @@ |
|||||
html,body,li{ |
|
||||
font-family: Microsoft YaHei UI; |
|
||||
font-size: 14px; |
|
||||
color: #1E2226; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
padding: 0; |
|
||||
margin: 0; |
|
||||
list-style: none; |
|
||||
font-style: normal; |
|
||||
text-decoration: none; |
|
||||
border: none; |
|
||||
} |
|
||||
body{ |
|
||||
background: #F5F7FA; |
|
||||
} |
|
||||
p{ |
|
||||
margin: 0; |
|
||||
} |
|
||||
|
|
||||
.flex{ |
|
||||
display: flex; |
|
||||
} |
|
||||
.hide{ |
|
||||
display: none !important; |
|
||||
} |
|
||||
.center{ |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
.column{ |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
} |
|
||||
|
|
||||
/* 底部 */ |
|
||||
.leftSideFooterNew{ |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
padding: 30px 70px; |
|
||||
font-size: var(--font-small-size); |
|
||||
color: #9E9E9E; |
|
||||
position: relative; |
|
||||
z-index: 98; |
|
||||
} |
|
||||
.leftSideFooterNew p{ |
|
||||
margin: 0; |
|
||||
color: #9E9E9E; |
|
||||
} |
|
||||
.leftSideFooterNew p span{ |
|
||||
color: #5B6FF6; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
.leftSideFooterNew p a{ |
|
||||
color: #9E9E9E; |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
@ -1,766 +0,0 @@ |
|||||
.flex { |
|
||||
display: flex; |
|
||||
display: -ms-flexbox; |
|
||||
} |
|
||||
.hide,.hidden{ |
|
||||
display: none !important; |
|
||||
} |
|
||||
.radio-wrap{} |
|
||||
.radio_box,.check_Box{ |
|
||||
display: flex; |
|
||||
display: -ms-flexbox; |
|
||||
align-items: center; |
|
||||
margin-right: 24px; |
|
||||
position: relative; |
|
||||
cursor: pointer; |
|
||||
font-weight: 500; |
|
||||
color: #2C394B; |
|
||||
transition: all .3s ease; |
|
||||
} |
|
||||
|
|
||||
.check_Box input,.radio_box input{ |
|
||||
opacity: 0; |
|
||||
position: absolute; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.radio_box div{ |
|
||||
width: 18px; |
|
||||
height: 18px; |
|
||||
margin-right: 8px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
/* @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { |
|
||||
.radio_box div{ |
|
||||
width: 20px; |
|
||||
height: 20px; |
|
||||
} |
|
||||
} */ |
|
||||
|
|
||||
.radio_box_active,.check_Box_active{ |
|
||||
color: #006AFF; |
|
||||
} |
|
||||
.radio_box div{ |
|
||||
background: url(../img/radio_normal.svg); |
|
||||
background-size: contain; |
|
||||
} |
|
||||
.radio_box_active div{ |
|
||||
width: 18px; |
|
||||
height: 18px; |
|
||||
animation: radio_scale .3s; |
|
||||
background: url(../img/radio_active.svg); |
|
||||
} |
|
||||
#page-numbers { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
list-style: none; |
|
||||
color: #8a8a8a; |
|
||||
padding: 0; |
|
||||
user-select: none; |
|
||||
} |
|
||||
|
|
||||
#page-numbers span { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
width: 32px; |
|
||||
height: 32px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
#page-numbers span { |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
|
|
||||
#page-numbers span:hover { |
|
||||
color: #006AFF; |
|
||||
} |
|
||||
|
|
||||
#page-numbers .pagActive:hover { |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
#next-page { |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
|
|
||||
.input-page span { |
|
||||
display: inline-block; |
|
||||
} |
|
||||
|
|
||||
/* 分页容器样式 */ |
|
||||
.pagination { |
|
||||
margin-top: 20px; |
|
||||
display: flex; |
|
||||
justify-content: flex-end; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.pagination input { |
|
||||
width: 50px; |
|
||||
padding: 5px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
|
|
||||
.pagActive { |
|
||||
background: #006AFF; |
|
||||
color: #fff; |
|
||||
border-radius: 4px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
.home-page { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.header-wrap { |
|
||||
/* position: absolute; |
|
||||
left: 0px; |
|
||||
top: 0px; */ |
|
||||
width: calc(100% - 64px); |
|
||||
height: 46px; |
|
||||
/* 自动布局 */ |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
padding: 8px 32px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
background: linear-gradient(270deg, #4EA4F3 0%, #3D85EA 100%); |
|
||||
} |
|
||||
|
|
||||
.home-logo { |
|
||||
width: 168px; |
|
||||
} |
|
||||
|
|
||||
/* Dropdown 容器 */ |
|
||||
.dropdown { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
} |
|
||||
|
|
||||
/* Dropdown 按钮 */ |
|
||||
.dropdown-toggle { |
|
||||
background-color: transparent; |
|
||||
padding: 10px 20px; |
|
||||
border: none; |
|
||||
cursor: pointer; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 8px; |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
/* Dropdown 面板 */ |
|
||||
.dropdown-panel { |
|
||||
display: none; |
|
||||
position: absolute; |
|
||||
right: 20px; |
|
||||
padding: 12px; |
|
||||
background-color: #fff; |
|
||||
min-width: 160px; |
|
||||
border-radius: 4px; |
|
||||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16); |
|
||||
z-index: 1; |
|
||||
} |
|
||||
|
|
||||
/* Dropdown 面板中的链接 */ |
|
||||
.dropdown-panel a { |
|
||||
color: black; |
|
||||
border-radius: 2px; |
|
||||
padding: 7px 10px; |
|
||||
background: #F6F7FA; |
|
||||
text-decoration: none; |
|
||||
display: block; |
|
||||
} |
|
||||
|
|
||||
/* Dropdown 面板中的链接悬停效果 */ |
|
||||
.dropdown-panel a:hover { |
|
||||
background-color: #f1f1f1; |
|
||||
} |
|
||||
|
|
||||
/* 图标旋转效果 */ |
|
||||
.icon { |
|
||||
transition: transform 0.3s ease; |
|
||||
} |
|
||||
|
|
||||
/* 面板展开时图标的旋转 */ |
|
||||
.icon.rotate { |
|
||||
transform: rotate(180deg); |
|
||||
} |
|
||||
|
|
||||
.header-right { |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.home-main { |
|
||||
margin: 20px; |
|
||||
background: #fff; |
|
||||
padding: 0 14px; |
|
||||
} |
|
||||
|
|
||||
.tab-list { |
|
||||
justify-content: space-between; |
|
||||
padding-top: 13px; |
|
||||
align-items: center; |
|
||||
border-bottom: 1px solid #DFE2E6;; |
|
||||
} |
|
||||
.tab-list::after{ |
|
||||
content: ''; |
|
||||
display: block; |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 1px; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
bottom: -8px; |
|
||||
background: linear-gradient(270deg, rgba(140, 145, 157, 0.1) 0%, rgba(140, 145, 157, 0.2) 50%, rgba(140, 145, 157, 0.1) 100%); |
|
||||
} |
|
||||
|
|
||||
.index-nav-wrap ul { |
|
||||
width: 346px; |
|
||||
height: 20px; |
|
||||
display: flex; |
|
||||
text-align: center; |
|
||||
justify-content: flex-start; |
|
||||
padding-left: 0; |
|
||||
letter-spacing: 1px; |
|
||||
box-sizing: border-box; |
|
||||
position: relative; |
|
||||
margin: 9px 0; |
|
||||
} |
|
||||
|
|
||||
.index-nav-wrap ul::after { |
|
||||
/* content: ''; |
|
||||
display: block; |
|
||||
position: absolute; |
|
||||
width: 500px; |
|
||||
height: 1px; |
|
||||
left: 50%; |
|
||||
transform: translateX(-50%); |
|
||||
bottom: -8px; |
|
||||
background: linear-gradient(270deg, rgba(140, 145, 157, 0.1) 0%, rgba(140, 145, 157, 0.2) 50%, rgba(140, 145, 157, 0.1) 100%); */ |
|
||||
} |
|
||||
|
|
||||
.index-nav-wrap ul li { |
|
||||
color: #3D4B54; |
|
||||
font-size: 14px; |
|
||||
font-weight: 500; |
|
||||
text-align: left; |
|
||||
position: relative; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.index-nav-wrap ul li span { |
|
||||
position: relative; |
|
||||
color: #3D4B54; |
|
||||
font-size: 14px; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.index-nav-wrap ul li span.active { |
|
||||
color: #1675FF !important; |
|
||||
font-weight: 600; |
|
||||
} |
|
||||
|
|
||||
.index-nav-wrap ul li span.active::after { |
|
||||
content: ''; |
|
||||
display: block; |
|
||||
position: absolute; |
|
||||
width: 100%; |
|
||||
height: 2px; |
|
||||
background: #1675FF; |
|
||||
border-radius: 2px; |
|
||||
left: 50%; |
|
||||
margin-left: -50%; |
|
||||
bottom: -12px; |
|
||||
} |
|
||||
|
|
||||
/* 小版视频容器 */ |
|
||||
#small-video-container { |
|
||||
width: 200px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
/* 小版视频封面图 */ |
|
||||
|
|
||||
|
|
||||
/* vedio */ |
|
||||
/* 初始小版视频样式 */ |
|
||||
/* 放大后的视频容器 */ |
|
||||
#large-video-container { |
|
||||
display: none; |
|
||||
position: fixed; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
width: 800px; |
|
||||
max-width: 800px; |
|
||||
z-index: 1000; |
|
||||
background: black; |
|
||||
padding: 50px; |
|
||||
border-radius: 16px; |
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
|
||||
} |
|
||||
|
|
||||
/* 放大后的视频 */ |
|
||||
#large-video { |
|
||||
width: 100%; |
|
||||
height: auto; |
|
||||
} |
|
||||
|
|
||||
/* 关闭按钮 */ |
|
||||
#close-btn, |
|
||||
#close-btn1 { |
|
||||
position: absolute; |
|
||||
top: 10px; |
|
||||
right: 10px; |
|
||||
background: red; |
|
||||
color: white; |
|
||||
border: none; |
|
||||
height: 30px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
/* padding: 10px; */ |
|
||||
width: 30px; |
|
||||
border-radius: 50%; |
|
||||
cursor: pointer; |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
|
|
||||
/* 小版图片容器 */ |
|
||||
#small-image-container { |
|
||||
width: 170px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
/* 小版图片 */ |
|
||||
.small-image, |
|
||||
.small-video-cover { |
|
||||
width: 170px; |
|
||||
height: 107px; |
|
||||
border-radius: 5px; |
|
||||
position: relative; |
|
||||
margin-right: 8px; |
|
||||
} |
|
||||
|
|
||||
.small-image-desc { |
|
||||
position: absolute; |
|
||||
left: 6px; |
|
||||
bottom: 8px; |
|
||||
border-radius: 2px; |
|
||||
background: rgba(0, 0, 0, 0.4); |
|
||||
padding: 4px 10px 5px 10px; |
|
||||
font-size: 12px; |
|
||||
z-index: 1; |
|
||||
line-height: 13px; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
.play-video { |
|
||||
width: 40px; |
|
||||
height: 40px; |
|
||||
position: absolute !important; |
|
||||
left: 50%; |
|
||||
top: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
} |
|
||||
|
|
||||
/* 放大后的图片容器 */ |
|
||||
#large-image-container { |
|
||||
display: none; |
|
||||
position: fixed; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
/* width: 800px; */ |
|
||||
/* height: 100%; */ |
|
||||
background: rgba(0, 0, 0, 0.8); |
|
||||
z-index: 1000; |
|
||||
text-align: center; |
|
||||
border-radius: 16px; |
|
||||
} |
|
||||
|
|
||||
#large-image-container h2 { |
|
||||
color: #fff; |
|
||||
} |
|
||||
|
|
||||
/* 放大后的图片 */ |
|
||||
#large-image { |
|
||||
margin: 20px 50px 50px; |
|
||||
width: 800px; |
|
||||
border: 5px solid white; |
|
||||
border-radius: 10px; |
|
||||
} |
|
||||
|
|
||||
/* 关闭按钮 */ |
|
||||
#close-btn2 { |
|
||||
position: absolute; |
|
||||
top: 20px; |
|
||||
right: 20px; |
|
||||
background: #fff; |
|
||||
color: #000; |
|
||||
border: none; |
|
||||
padding: 10px 15px; |
|
||||
border-radius: 50%; |
|
||||
cursor: pointer; |
|
||||
font-size: 20px; |
|
||||
} |
|
||||
|
|
||||
.button { |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
padding: 7px 22px; |
|
||||
border-radius: 3px; |
|
||||
background: #FFFFFF; |
|
||||
box-sizing: border-box; |
|
||||
letter-spacing: 0.08em; |
|
||||
border: 1px solid #DFE2E6; |
|
||||
margin-left: 20px; |
|
||||
color: #23242B; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.upload_btn{ |
|
||||
margin-left: 0; |
|
||||
} |
|
||||
button:hover { |
|
||||
opacity: .8; |
|
||||
} |
|
||||
|
|
||||
.button-primary { |
|
||||
background: #006AFF; |
|
||||
color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
.button-normal {} |
|
||||
|
|
||||
.btngroups { |
|
||||
justify-content: flex-end; |
|
||||
|
|
||||
} |
|
||||
|
|
||||
.addNewBtn { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
padding: 7px 12px; |
|
||||
border-radius: 3px; |
|
||||
opacity: 1; |
|
||||
height: 32px; |
|
||||
border:none; |
|
||||
/* main/main_stardard */ |
|
||||
background: #006AFF; |
|
||||
font-weight: normal; |
|
||||
line-height: normal; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
.list_all { |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.list_item { |
|
||||
margin: 18px 12px; |
|
||||
padding-bottom: 18px; |
|
||||
width: 100%; |
|
||||
border-bottom: 1px solid #eee; |
|
||||
} |
|
||||
|
|
||||
.list_item_top { |
|
||||
color: #8A9099; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
|
|
||||
.list_item_top .list_item_top_l b { |
|
||||
color: #1E2226; |
|
||||
} |
|
||||
|
|
||||
.list_item_top_r { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.list_item_top_r img { |
|
||||
margin-right: 4px; |
|
||||
} |
|
||||
|
|
||||
.desc_text { |
|
||||
line-height: 18px; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #1E2226; |
|
||||
margin-top: 12px; |
|
||||
} |
|
||||
|
|
||||
.img_list ,.img_list2{ |
|
||||
margin: 8px 0; |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
|
|
||||
.img_list img ,.img_list2 img{ |
|
||||
width: 170px; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.green, |
|
||||
.blue { |
|
||||
padding: 2px 10px; |
|
||||
border-radius: 4px; |
|
||||
opacity: 1; |
|
||||
letter-spacing: 0.08em; |
|
||||
color: #0DAF49; |
|
||||
background: rgba(239, 255, 224, 0.5); |
|
||||
box-sizing: border-box; |
|
||||
border: 1px solid rgba(0, 194, 97, 0.6); |
|
||||
} |
|
||||
|
|
||||
.blue { |
|
||||
color: #006AFF; |
|
||||
background: #F2F7FF; |
|
||||
border: 1px solid #BFDAFF; |
|
||||
} |
|
||||
.form-item{ |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 12px 0; |
|
||||
} |
|
||||
.form-left{ |
|
||||
width: 60px; |
|
||||
margin-right: 24px; |
|
||||
} |
|
||||
.form-right{ |
|
||||
flex: 1; |
|
||||
} |
|
||||
.editmodal .add-form .form-left{ |
|
||||
display: none; |
|
||||
} |
|
||||
.addmodal .add-form .form-left{ |
|
||||
display: block; |
|
||||
} |
|
||||
.addmodal .modal_upload_btn{ |
|
||||
flex-direction: column; |
|
||||
justify-content: flex-end; |
|
||||
margin-bottom: 20px; |
|
||||
} |
|
||||
.addmodal .modal_btns{ |
|
||||
margin-bottom: 12px; |
|
||||
justify-content: flex-end; |
|
||||
width: 100%; |
|
||||
} |
|
||||
.addmodal .modal_btns + p{ |
|
||||
width: 100%; |
|
||||
text-align: right; |
|
||||
} |
|
||||
/* 弹框样式 */ |
|
||||
.modal { |
|
||||
display: none; |
|
||||
position: fixed; |
|
||||
top: 50%; |
|
||||
left: 50%; |
|
||||
transform: translate(-50%, -50%); |
|
||||
width: 660px; |
|
||||
padding: 0 24px 12px; |
|
||||
background: #fff; |
|
||||
border-radius: 6px; |
|
||||
opacity: 1; |
|
||||
background: #FFFFFF; |
|
||||
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
|
||||
z-index: 1000; |
|
||||
} |
|
||||
#close_modal{ |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.modal-overlay { |
|
||||
display: none; |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
background: rgba(0, 0, 0, 0.5); |
|
||||
z-index: 999; |
|
||||
} |
|
||||
.modal textarea { |
|
||||
width: calc(100% - 24px); |
|
||||
height: 64px; |
|
||||
margin-bottom: 10px; |
|
||||
padding: 10px 12px 28px; |
|
||||
letter-spacing: 0.08em; |
|
||||
font-variation-settings: "opsz" auto; |
|
||||
color: #1E2226; |
|
||||
} |
|
||||
.text-area-container{ |
|
||||
position: relative; |
|
||||
} |
|
||||
.wordNum{ |
|
||||
position: absolute; |
|
||||
right: 13px; |
|
||||
bottom: 20px; |
|
||||
} |
|
||||
.modal .modal_top{ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
margin: 16px 0; |
|
||||
} |
|
||||
.modal .modal_top b{ |
|
||||
font-size: 16px; |
|
||||
} |
|
||||
.modal .preview { |
|
||||
margin-bottom: 10px; |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
.modal .preview .small-image{ |
|
||||
margin-right: 10px; |
|
||||
margin-bottom: 10px; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.modal .preview img, |
|
||||
.modal .preview video { |
|
||||
max-width: 170px; |
|
||||
position: relative; |
|
||||
} |
|
||||
.modal .preview .delete-btn { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
width: 24px; |
|
||||
color: white; |
|
||||
background: transparent; |
|
||||
border: none; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.modal .img_list2 .delete-btn { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
width: 24px; |
|
||||
color: white; |
|
||||
border: none; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.modal .buttons { |
|
||||
justify-content: flex-end; |
|
||||
} |
|
||||
.modal .buttons button { |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
|
|
||||
.modal_btn_column{ |
|
||||
flex-direction: column; |
|
||||
justify-content: flex-end; |
|
||||
} |
|
||||
.modal_upload_btn{ |
|
||||
align-items: center; |
|
||||
margin-bottom: 20px; |
|
||||
width: 100%; |
|
||||
} |
|
||||
.modal_upload_btn p{ |
|
||||
font-size: 12px; |
|
||||
font-weight: normal; |
|
||||
line-height: 13px; |
|
||||
letter-spacing: 0.08em; |
|
||||
font-variation-settings: "opsz" auto; |
|
||||
color: #8A9099; |
|
||||
margin-left: 10px; |
|
||||
} |
|
||||
.modal_btns button:first-child{ |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
/* 上传区域样式 */ |
|
||||
.upload-container { |
|
||||
width: 400px; |
|
||||
margin: 20px auto; |
|
||||
padding: 20px; |
|
||||
border: 1px solid #ccc; |
|
||||
background: #f9f9f9; |
|
||||
} |
|
||||
.upload-container input[type="file"] { |
|
||||
display: none; |
|
||||
} |
|
||||
.upload-container button { |
|
||||
margin-right: 10px; |
|
||||
} |
|
||||
.upload_name{ |
|
||||
font-family: Inter; |
|
||||
font-size: 13px; |
|
||||
font-weight: normal; |
|
||||
line-height: 22px; |
|
||||
letter-spacing: 0px; |
|
||||
color: #606266; /* #606266 */ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
} |
|
||||
.upload_file_name{ |
|
||||
max-width: 130px; |
|
||||
display: inline-block; |
|
||||
text-overflow: ellipsis; |
|
||||
white-space: nowrap; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
.preview { |
|
||||
margin-top: 20px; |
|
||||
} |
|
||||
.preview .item { |
|
||||
position: relative; |
|
||||
display: inline-block; |
|
||||
margin-right: 10px; |
|
||||
margin-bottom: 10px; |
|
||||
width: 170px; |
|
||||
} |
|
||||
.preview img, |
|
||||
.preview video { |
|
||||
/* max-width: 100px; |
|
||||
max-height: 100px; */ |
|
||||
} |
|
||||
.preview .delete-btn { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
background: red; |
|
||||
color: white; |
|
||||
border: none; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
.progress-bar { |
|
||||
width: 100%; |
|
||||
height: 2px; |
|
||||
background: #EBEEF5; |
|
||||
margin-top: 5px; |
|
||||
} |
|
||||
.progress-bar .progress { |
|
||||
height: 100%; |
|
||||
width: 0; |
|
||||
background: #006AFF; |
|
||||
} |
|
||||
.status { |
|
||||
font-size: 12px; |
|
||||
color: #666; |
|
||||
margin-top: 5px; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.status.uploading { |
|
||||
color: #2196f3; |
|
||||
} |
|
||||
.status.success { |
|
||||
color: #4caf50; |
|
||||
} |
|
||||
.status.failed { |
|
||||
color: #f44336; |
|
||||
} |
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 792 B |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.3 MiB |
|
Before Width: | Height: | Size: 792 B |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 5.6 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 946 B |
|
Before Width: | Height: | Size: 134 KiB |
|
Before Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 64 KiB |
@ -1,830 +0,0 @@ |
|||||
$(document).ready(function () { |
|
||||
var imgurl = '' |
|
||||
var tabActive = '1'; |
|
||||
var cur_editdata = {}; //当前编辑数据
|
|
||||
var vediourl = '' |
|
||||
var allData =[];//用于列表展示
|
|
||||
// 假数据假数据-----
|
|
||||
//待审批
|
|
||||
var waitCheck = [{ |
|
||||
id: 1, |
|
||||
source: '微博', |
|
||||
name: '麻辣烫---', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
vedios: [{ |
|
||||
img_show: 'viewimg1.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
||||
}, |
|
||||
{ |
|
||||
img_show: 'viewimg2.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/BYqzWJAb0TEleeeLZG-L5qFoBnmmKt0WC8qxw4hVDFc.mp4', |
|
||||
}, |
|
||||
], |
|
||||
desc: '111111华佗医生真是医术献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。', |
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
imgs: [ |
|
||||
'viewimg1.png', |
|
||||
'viewimg2.png', |
|
||||
'viewimg3.png', |
|
||||
], |
|
||||
source: '自录入', |
|
||||
desc: '22222对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位', |
|
||||
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
||||
name: '麻辣烫---', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
}, |
|
||||
{ |
|
||||
id: 3, |
|
||||
source: '自录入', |
|
||||
name: '麻辣烫---', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
vedios: [{ |
|
||||
img_show: 'viewimg1.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
||||
}, |
|
||||
{ |
|
||||
img_show: 'viewimg1.png', |
|
||||
url: 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
|
||||
}, |
|
||||
], |
|
||||
desc: '333333浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医', |
|
||||
}, |
|
||||
{ |
|
||||
id: 4, |
|
||||
imgs: [ |
|
||||
'viewimg1.png', |
|
||||
'viewimg2.png', |
|
||||
'viewimg3.png', |
|
||||
], |
|
||||
source: '自录入', |
|
||||
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
||||
name: '麻辣烫---', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位', |
|
||||
desc: '4444浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医', |
|
||||
}, |
|
||||
{ |
|
||||
id: 5, |
|
||||
source: '微博', |
|
||||
name: '麻辣烫---', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
vedios: [{ |
|
||||
img_show: 'viewimg1.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
||||
}, |
|
||||
{ |
|
||||
img_show: 'viewimg1.png', |
|
||||
url: 'https://s10.mogucdn.com/mlcdn/c45406/240506_303f82ha577j13gc73j71faj880gi.mp4', |
|
||||
}, |
|
||||
], |
|
||||
desc: '55555浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医', |
|
||||
}, |
|
||||
{ |
|
||||
id: 6, |
|
||||
imgs: [ |
|
||||
'viewimg1.png', |
|
||||
'viewimg2.png', |
|
||||
'viewimg3.png', |
|
||||
], |
|
||||
source: '自录入', |
|
||||
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
||||
name: '麻辣烫---', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
answer: '对于中医按摩时穴位定位的问题，确实有不少初学者会遇到找不准穴位的情况。以下是一些技巧和建议，以及辅助工具，可以帮助您更准确地找到穴位', |
|
||||
desc: '6666浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医的智慧和精髓，真是受益匪浅！感谢您为中医事业做出的贡献💐。华佗医生真是医术高明，每次看您的微博都能学到很多中医。', |
|
||||
}, |
|
||||
]; |
|
||||
//已审批
|
|
||||
var checkList = [{ |
|
||||
id: 1, |
|
||||
source: '微博', |
|
||||
name: '待审批11-', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
vedios: [{ |
|
||||
img_show: 'viewimg1.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
||||
}, |
|
||||
{ |
|
||||
img_show: 'viewimg2.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/BYqzWJAb0TEleeeLZG-L5qFoBnmmKt0WC8qxw4hVDFc.mp4', |
|
||||
}, |
|
||||
], |
|
||||
desc: '审批审批----------审批', |
|
||||
|
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
|
|
||||
imgs: [ |
|
||||
'viewimg1.png', |
|
||||
'viewimg2.png', |
|
||||
'viewimg3.png', |
|
||||
], |
|
||||
source: '自录入', |
|
||||
desc: '审批审批----------审批', |
|
||||
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
||||
name: '待审批-2222', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
}, |
|
||||
]; |
|
||||
//已删除
|
|
||||
var deletedList = [{ |
|
||||
id: 1, |
|
||||
|
|
||||
source: '微博', |
|
||||
name: '已删除111-', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
vedios: [{ |
|
||||
img_show: 'viewimg1.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/QveMufgzEwjhHPj1wo_KI_KF7vbZwUJhbOpGtVCXN3Y.mp4', |
|
||||
}, |
|
||||
{ |
|
||||
img_show: 'viewimg2.png', |
|
||||
url: 'https://cloud.video.taobao.com/vod/BYqzWJAb0TEleeeLZG-L5qFoBnmmKt0WC8qxw4hVDFc.mp4', |
|
||||
}, |
|
||||
], |
|
||||
desc: '删除----删除', |
|
||||
|
|
||||
}, |
|
||||
{ |
|
||||
id: 2, |
|
||||
|
|
||||
imgs: [ |
|
||||
'viewimg1.png', |
|
||||
'viewimg2.png', |
|
||||
'viewimg3.png', |
|
||||
], |
|
||||
source: '自录入', |
|
||||
desc: '删除----删除', |
|
||||
question: '有没有什么技巧或者辅助工具可以帮助我们更准确地找到穴位呢？', |
|
||||
name: '已删除-2222', |
|
||||
lurutime: '2025.01.13 23:00', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
allData = waitCheck;//初始赋值待审批列表 后续从接口请求赋值
|
|
||||
|
|
||||
$('.radio-wrap').on('click', '.radio_box input', function () { |
|
||||
var radio_val = $(this).attr('value') |
|
||||
$('.edit-input').val('') |
|
||||
if (radio_val == '1') { |
|
||||
$('.answer-form').hide() |
|
||||
$('.common-input').html('录入信息') |
|
||||
} else { |
|
||||
$('.common-input').html('提问信息') |
|
||||
$('.answer-form').show() |
|
||||
} |
|
||||
$('.radio-wrap .radio_box').removeClass('radio_box_active'); |
|
||||
$(this).parent().addClass('radio_box_active'); |
|
||||
}) |
|
||||
|
|
||||
|
|
||||
//编辑 打开弹框
|
|
||||
$('#data-list').on('click', '.list_item_top_r', function () { |
|
||||
$('.preview').html('') |
|
||||
var cur_id = $(this).attr('id'); |
|
||||
cur_editdata = allData.filter(item => item.id == cur_id)[0]; |
|
||||
console.log(cur_editdata, 'cur_editdata'); |
|
||||
$('.edit-input').val('') |
|
||||
$('.radio-form').hide(); |
|
||||
$('.answer-form').hide(); |
|
||||
$('.normal-input').val(cur_editdata.desc); |
|
||||
$('.char-count').text(cur_editdata.desc.length + '/100'); |
|
||||
|
|
||||
if ($('.modal').hasClass('addmodal')) { |
|
||||
$('.modal').removeClass('addmodal') |
|
||||
$('.modal').addClass('editmodal') |
|
||||
} else { |
|
||||
$('.modal').addClass('editmodal') |
|
||||
} |
|
||||
$('#header_title').html('编辑'); |
|
||||
// $('.edit-input').show();
|
|
||||
$('.img_list2').html('') |
|
||||
$('.img_list2').show() |
|
||||
imagesHTML1 = '' |
|
||||
renderImages(cur_editdata) |
|
||||
$('.modal, .modal-overlay').fadeIn(); |
|
||||
}) |
|
||||
// 打开弹框
|
|
||||
$('.addNewBtn').click(function () { |
|
||||
$('.preview').html('') |
|
||||
$('.edit-input').val('') |
|
||||
$('.radio-form').show(); |
|
||||
$('.img_list2').html('') |
|
||||
$('.img_list2').show() |
|
||||
imagesHTML1 = '' |
|
||||
var radio_val = $('.radio-wrap').find('.radio_box_active input').val(); |
|
||||
if (radio_val == '1') { |
|
||||
$('.answer-form').hide() |
|
||||
$('.common-input').html('录入信息') |
|
||||
} else { |
|
||||
$('.answer-form').show() |
|
||||
$('.common-input').html('提问信息') |
|
||||
} |
|
||||
if ($('.modal').hasClass('editmodal')) { |
|
||||
$('.modal').removeClass('editmodal') |
|
||||
$('.modal').addClass('addmodal') |
|
||||
} else { |
|
||||
$('.modal').addClass('addmodal') |
|
||||
} |
|
||||
|
|
||||
$('#header_title').html('新增自录入') |
|
||||
$('.modal, .modal-overlay').fadeIn(); |
|
||||
}); |
|
||||
var imagesHTML1 = '' |
|
||||
|
|
||||
function renderImages(item) { |
|
||||
if (item.imgs) { |
|
||||
item.imgs.forEach(image => { |
|
||||
imagesHTML1 += ` |
|
||||
<div class="small-image"> |
|
||||
<span class="small-image-desc">图片</span> |
|
||||
<img src="./style/img/${image}" alt="Small Image"> |
|
||||
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image"> |
|
||||
</div> |
|
||||
`;
|
|
||||
}); |
|
||||
} else if (item.vedios) { |
|
||||
item.vedios.forEach(v => { |
|
||||
imagesHTML1 += ` |
|
||||
<div class="small-video-cover" href="${v.url}"> |
|
||||
<span class="small-image-desc">视频</span> |
|
||||
<img class="small-video-show" src="./style/img/${v.img_show}" alt="Video Cover"> |
|
||||
<img src="./style/img/play.svg" class="play-video" alt="...丢了"> |
|
||||
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image"> |
|
||||
</div> |
|
||||
`;
|
|
||||
}); |
|
||||
} |
|
||||
$('.img_list2').html(imagesHTML1) |
|
||||
} |
|
||||
|
|
||||
// 关闭弹框
|
|
||||
$('#cancel, .modal-overlay').click(function () { |
|
||||
$('.modal, .modal-overlay').fadeOut(); |
|
||||
$('.edit-input').val('') |
|
||||
$('.wordNum').html('0/100') |
|
||||
}); |
|
||||
$('#close_modal').click(function () { |
|
||||
$('.modal, .modal-overlay').fadeOut(); |
|
||||
$('.edit-input').val('') |
|
||||
$('.wordNum').html('0/100') |
|
||||
}); |
|
||||
|
|
||||
// 上传图片
|
|
||||
$('#upload-image-btn').click(function () { |
|
||||
$('#upload-image').click(); // 触发文件选择
|
|
||||
}); |
|
||||
|
|
||||
$('#upload-image').change(function (e) { |
|
||||
const files = e.target.files; |
|
||||
for (let i = 0; i < files.length; i++) { |
|
||||
uploadFile(files[i], 'image'); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 上传视频
|
|
||||
$('#upload-video-btn').click(function () { |
|
||||
$('#upload-video').click(); // 触发文件选择
|
|
||||
}); |
|
||||
|
|
||||
$('#upload-video').change(function (e) { |
|
||||
const files = e.target.files; |
|
||||
for (let i = 0; i < files.length; i++) { |
|
||||
uploadFile(files[i], 'video'); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 文件上传函数
|
|
||||
function uploadFile(file, type) { |
|
||||
const item = $(` |
|
||||
<div class="item"> |
|
||||
<div class="upload_name">上传中...</div> |
|
||||
<div class="progress-bar"> |
|
||||
<div class="progress"></div> |
|
||||
</div> |
|
||||
<div class="status uploading">上传中...</div> |
|
||||
|
|
||||
</div> |
|
||||
`);
|
|
||||
$('.preview').append(item); |
|
||||
// 模拟上传过程
|
|
||||
const formData = new FormData(); |
|
||||
formData.append('file', file); |
|
||||
// 模拟接口上传
|
|
||||
$.ajax({ |
|
||||
url: 'http://zq.pengda.checkcopy.com//upload_file', // 模拟接口地址
|
|
||||
type: 'POST', |
|
||||
data: formData, |
|
||||
processData: false, |
|
||||
contentType: false, |
|
||||
xhr: function () { |
|
||||
console.log(file,'=====file'); |
|
||||
var xhr = $.ajaxSettings.xhr(); |
|
||||
xhr.upload.addEventListener('progress', function (e) { |
|
||||
if (e.lengthComputable) { |
|
||||
const percent = Math.ceil((e.loaded / e.total) * 100); |
|
||||
item.find('.progress').css('width', percent + '%'); |
|
||||
item.find('.upload_name').html(`<span class="upload_file_name">${file.name}</span>` + percent + '%'); |
|
||||
} |
|
||||
}, false); |
|
||||
return xhr; |
|
||||
}, |
|
||||
success: function (response) { |
|
||||
res = JSON.parse(response) |
|
||||
item.find('.status').removeClass('uploading').addClass('hidden').text('上传成功'); |
|
||||
item.find('.progress-bar').addClass('hide'); // 隐藏进度条
|
|
||||
item.find('.upload_name').addClass('hide'); // 隐藏进度条
|
|
||||
const reader = new FileReader(); |
|
||||
reader.onload = function (event) { |
|
||||
if (type === 'image') { |
|
||||
item.prepend(` <div class="small-image">
|
|
||||
<span class="small-image-desc">图片</span> |
|
||||
<img src="${event.target.result}" alt="Small Image"> |
|
||||
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image"> |
|
||||
</div>`); |
|
||||
} else if (type === 'video') { |
|
||||
// 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位
|
|
||||
item.prepend(` <div class="small-video-cover" href="">
|
|
||||
<span class="small-image-desc">视频</span> |
|
||||
<img class="small-video-show" src="${event.target.result}" alt="Video Cover"> |
|
||||
<img src="./style/img/play.svg" class="play-video" alt="...丢了"> |
|
||||
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image"> |
|
||||
</div>`); |
|
||||
} |
|
||||
}; |
|
||||
reader.readAsDataURL(file); |
|
||||
return |
|
||||
if (res.status) { |
|
||||
item.find('.status').removeClass('uploading').addClass('hidden').text('上传成功'); |
|
||||
item.find('.progress-bar').addClass('hide'); // 隐藏进度条
|
|
||||
item.find('.upload_name').addClass('hide'); // 隐藏进度条
|
|
||||
const reader = new FileReader(); |
|
||||
reader.onload = function (event) { |
|
||||
if (type === 'image') { |
|
||||
item.prepend(` <div class="small-image">
|
|
||||
<span class="small-image-desc">图片</span> |
|
||||
<img src="${event.target.result}" alt="Small Image"> |
|
||||
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image"> |
|
||||
</div>`); |
|
||||
} else if (type === 'video') { |
|
||||
// 视频需要展示封面图片 后续从response、获取也行 event.target.result只是用作占位
|
|
||||
item.prepend(` <div class="small-video-cover" href="">
|
|
||||
<span class="small-image-desc">视频</span> |
|
||||
<img class="small-video-show" src="${event.target.result}" alt="Video Cover"> |
|
||||
<img src="./style/img/play.svg" class="play-video" alt="...丢了"> |
|
||||
<img class="delete-btn" src="./style/img/delete-icon.svg" alt="Small Image"> |
|
||||
</div>`); |
|
||||
} |
|
||||
}; |
|
||||
reader.readAsDataURL(file); |
|
||||
}else{ |
|
||||
console.log(res,'response.info---'); |
|
||||
item.find('.upload_name').html(`<span class="upload_file_name">${file.name}</span>` +res.info); |
|
||||
item.find('.status').removeClass('uploading').addClass('failed').text('上传失败'); |
|
||||
} |
|
||||
}, |
|
||||
error: function () { |
|
||||
item.find('.status').removeClass('uploading').addClass('failed').text('上传失败');ç |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
// 删除功能
|
|
||||
$('.img_list2').on('click', '.delete-btn', function () { |
|
||||
$(this).parent().remove(); |
|
||||
// 请求借口
|
|
||||
// $.ajax({
|
|
||||
// type: "post",
|
|
||||
// dataType: 'json',
|
|
||||
// url: '',
|
|
||||
// data: {
|
|
||||
// type
|
|
||||
// },
|
|
||||
// success: function (res) {}
|
|
||||
// })
|
|
||||
}); |
|
||||
$('.preview').on('click', '.delete-btn', function () { |
|
||||
$(this).parent().parent().remove(); |
|
||||
// 请求借口
|
|
||||
// $.ajax({
|
|
||||
// type: "post",
|
|
||||
// dataType: 'json',
|
|
||||
// url: '',
|
|
||||
// data: {
|
|
||||
// type
|
|
||||
// },
|
|
||||
// success: function (res) {}
|
|
||||
// })
|
|
||||
}); |
|
||||
// 三个按钮操作
|
|
||||
|
|
||||
|
|
||||
// viedo
|
|
||||
// 点击小版视频封面图时放大
|
|
||||
$('#data-list').on('click', '.list_item .small-video-cover', function () { |
|
||||
console.log($(this), '900000'); |
|
||||
vediourl = $(this).attr('href') |
|
||||
console.log(vediourl, '------8988989'); |
|
||||
// $('#large-viedo-url').attr('src', vediourl)
|
|
||||
var dom = document.getElementById('large-viedo-url') |
|
||||
dom.src = vediourl |
|
||||
$('#large-video-container').fadeIn(); // 显示放大后的视频容器
|
|
||||
$('#large-video').get(0).load(); // 播放视频
|
|
||||
setTimeout(() => { |
|
||||
$('#large-video').get(0).play(); // 播放视频
|
|
||||
}, 500); |
|
||||
}); |
|
||||
|
|
||||
// 点击关闭按钮时关闭放大视频
|
|
||||
$('#close-btn').click(function () { |
|
||||
$('#large-video').get(0).pause(); // 暂停视频
|
|
||||
$('#large-video-container').fadeOut(); // 隐藏放大后的视频容器
|
|
||||
}); |
|
||||
|
|
||||
// 图片
|
|
||||
$('#data-list').on('click', '.list_item .small-image', function () { |
|
||||
imgurl = $(this).attr('src') |
|
||||
$('#large-image').attr('src', imgurl) |
|
||||
$('#large-image-container').fadeIn(); // 显示放大后的图片容器
|
|
||||
}); |
|
||||
|
|
||||
// 点击关闭按钮时关闭放大图片
|
|
||||
$('#close-btn2').click(function () { |
|
||||
$('#large-image-container').fadeOut(); // 隐藏放大后的图片容器
|
|
||||
}); |
|
||||
|
|
||||
// 点击背景区域时关闭放大图片
|
|
||||
$('#large-image-container').click(function (e) { |
|
||||
if (e.target === this) { |
|
||||
$('#large-image-container').fadeOut(); // 隐藏放大后的图片容器
|
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
$('.dropdown-toggle').click(function () { |
|
||||
const dropdownPanel = document.querySelector('.dropdown-panel'); |
|
||||
const icon = document.querySelector('.icon'); |
|
||||
// 切换面板的显示/隐藏
|
|
||||
if (dropdownPanel.style.display === 'block') { |
|
||||
dropdownPanel.style.display = 'none'; |
|
||||
icon.classList.remove('rotate'); // 移除旋转效果
|
|
||||
} else { |
|
||||
dropdownPanel.style.display = 'block'; |
|
||||
icon.classList.add('rotate'); // 添加旋转效果
|
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
// 点击页面其他区域关闭面板
|
|
||||
document.addEventListener('click', (event) => { |
|
||||
const dropdown = document.querySelector('.dropdown'); |
|
||||
const dropdownPanel = document.querySelector('.dropdown-panel'); |
|
||||
const icon = document.querySelector('.icon'); |
|
||||
|
|
||||
// 如果点击的区域不在 Dropdown 内，则关闭面板
|
|
||||
if (!dropdown.contains(event.target)) { |
|
||||
dropdownPanel.style.display = 'none'; |
|
||||
icon.classList.remove('rotate'); |
|
||||
} |
|
||||
}); |
|
||||
var list = waitCheck |
|
||||
var currentPage = 1; // 定义变量，用于存储当前的页码
|
|
||||
var pageSize = 2; // 定义变量，用于存储当前页条数
|
|
||||
renderList(list) |
|
||||
// 当文档加载完成后执行以下函数
|
|
||||
function renderList(list) { |
|
||||
function createPagination(currentPage, totalPages) { |
|
||||
var paginationHtml = ""; // 初始化一个字符串，用于存放分页条的HTML代码
|
|
||||
|
|
||||
// 如果当前页不是第一页，则生成一个“上一页”按钮
|
|
||||
// if (currentPage > 1) {
|
|
||||
paginationHtml += "<li><</li>"; |
|
||||
// }
|
|
||||
|
|
||||
// 始终显示第一页的页码
|
|
||||
paginationHtml += generatePageNumberHtml(1, currentPage); |
|
||||
|
|
||||
// 如果总页数大于1页，则继续生成分页条的其余部分
|
|
||||
if (totalPages > 1) { |
|
||||
// 如果当前页码大于3，则在第一页和当前页之间添加省略号
|
|
||||
if (currentPage > 3) { |
|
||||
paginationHtml += "<li>...</li>"; |
|
||||
} |
|
||||
// 遍历当前页附近的页码，并生成对应的分页按钮
|
|
||||
for ( |
|
||||
let i = Math.max(currentPage - 2, 2); i <= Math.min(currentPage + 2, totalPages - 1); i++ |
|
||||
) { |
|
||||
paginationHtml += generatePageNumberHtml(i, currentPage); |
|
||||
} |
|
||||
// 如果当前页码小于总页数减去2，则在当前页和最后一页之间添加省略号
|
|
||||
if (currentPage < totalPages - 2) { |
|
||||
paginationHtml += "<li>...</li>"; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 始终显示最后一页的页码
|
|
||||
paginationHtml += generatePageNumberHtml(totalPages, currentPage); |
|
||||
|
|
||||
// 如果当前页不是最后一页，则生成一个“下一页”按钮
|
|
||||
if (currentPage < totalPages) { |
|
||||
paginationHtml += "<li>></li>"; |
|
||||
} |
|
||||
|
|
||||
// 返回生成的分页条HTML字符串
|
|
||||
return paginationHtml; |
|
||||
} |
|
||||
// 创建分页条的函数
|
|
||||
|
|
||||
// 生成单个页码按钮的HTML的函数
|
|
||||
function generatePageNumberHtml(pageNumber, currentPage) { |
|
||||
// 返回一个格式化后的HTML字符串，包含激活状态的判断
|
|
||||
return ( |
|
||||
'<li class="' + |
|
||||
(pageNumber === currentPage ? "pagActive" : "") + |
|
||||
'">' + |
|
||||
pageNumber + |
|
||||
"</li>" |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
// 选择页码的函数
|
|
||||
function selectPage(pageNumber) { |
|
||||
// 更新当前页码的变量，并重新生成分页条
|
|
||||
currentPage = pageNumber; |
|
||||
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length / pageSize))); |
|
||||
} |
|
||||
|
|
||||
// 为分页条上的每个按钮绑定点击事件
|
|
||||
$("#pagination").on("click", "li", function (event) { |
|
||||
let pageNumber = $(this).text(); // 获取点击的页码或按钮文本
|
|
||||
|
|
||||
// 如果点击的是省略号，则不执行任何操作
|
|
||||
if (pageNumber === "...") { |
|
||||
event.preventDefault(); |
|
||||
return; |
|
||||
} |
|
||||
|
|
||||
// 根据点击的按钮，调用selectPage函数更新当前页码
|
|
||||
if (pageNumber === "<") { |
|
||||
if (currentPage < 2) { |
|
||||
return |
|
||||
} |
|
||||
selectPage(currentPage - 1); |
|
||||
} else if (pageNumber === ">") { |
|
||||
// if(currentPage <2){
|
|
||||
// return
|
|
||||
// }
|
|
||||
selectPage(currentPage + 1); |
|
||||
} else { |
|
||||
selectPage(parseInt(pageNumber)); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 初始化分页条，总页数为20，默认显示第一页
|
|
||||
$("#pagination").html(createPagination(currentPage, Math.ceil(list.length / pageSize))); |
|
||||
} |
|
||||
|
|
||||
// 模拟数据
|
|
||||
// var allData = [
|
|
||||
// "数据 1", "数据 2", "数据 3", "数据 4", "数据 5",
|
|
||||
// "数据 6", "数据 7", "数据 8", "数据 9", "数据 10",
|
|
||||
// "数据 11", "数据 12", "数据 13", "数据 14", "数据 15",
|
|
||||
// "数据 16", "数据 17", "数据 18", "数据 19", "数据 20",
|
|
||||
// "数据 21", "数据 22", "数据 23", "数据 24", "数据 25",
|
|
||||
// "数据 26", "数据 27", "数据 28", "数据 29", "数据 30"
|
|
||||
// ];
|
|
||||
// 总页数
|
|
||||
var totalPages = Math.ceil(allData.length / pageSize); |
|
||||
// 渲染数据
|
|
||||
function renderData() { |
|
||||
totalPages = Math.ceil(allData.length / pageSize); |
|
||||
const start = (currentPage - 1) * pageSize; |
|
||||
const end = start + pageSize; |
|
||||
const pageData = allData.slice(start, end); |
|
||||
// 清空列表
|
|
||||
$('#data-list').empty(); |
|
||||
|
|
||||
var html1 = ''; |
|
||||
// 渲染当前页数据
|
|
||||
pageData.forEach(item => { |
|
||||
let imagesHTML = ''; |
|
||||
if (item.imgs) { |
|
||||
item.imgs.forEach(image => { |
|
||||
imagesHTML += ` |
|
||||
<div class="small-image"> |
|
||||
<span class="small-image-desc">图片</span> |
|
||||
<img src="./style/img/${image}" alt="Small Image"> |
|
||||
</div> |
|
||||
`;
|
|
||||
}); |
|
||||
} else if (item.vedios) { |
|
||||
item.vedios.forEach(v => { |
|
||||
imagesHTML += ` |
|
||||
<div class="small-video-cover" href="${v.url}"> |
|
||||
<span class="small-image-desc">视频</span> |
|
||||
<img class="small-video-show" src="./style/img/${v.img_show}" alt="Video Cover"> |
|
||||
<img src="./style/img/play.svg" class="play-video" alt="...丢了"> |
|
||||
</div> |
|
||||
`;
|
|
||||
}); |
|
||||
} |
|
||||
html1 += `<div class="list_item ">
|
|
||||
<div class="list_item_top flex"> |
|
||||
<div class="list_item_top_l"> |
|
||||
<span class="${item.source == '微博' ? 'green' : 'blue'}">` + item.source + `</span> |
|
||||
${item.question ? `<b>${item.question}</b>` :''} |
|
||||
<span>` + item.name + `</span> |
|
||||
<span>录入：` + item.lurutime + `</span> |
|
||||
</div> |
|
||||
${ |
|
||||
tabActive == '1' ? `<div class="list_item_top_r" id="${item.id}"><img src="./style/img/edit.svg" alt="">编辑</div>` :'' |
|
||||
} |
|
||||
|
|
||||
</div> |
|
||||
<p class="desc_text"> |
|
||||
${item.desc} |
|
||||
</p> |
|
||||
<!-- 图片合集 --> |
|
||||
<div class="img_list"> |
|
||||
${imagesHTML} |
|
||||
</div> |
|
||||
<div class="flex btngroups"> |
|
||||
${tabActive == '1' || tabActive == '2' ? '<button class="button button-normal deleteBtn">删除</button>' : ''} |
|
||||
${tabActive == '1' ? '<button class="button button-primary passBtn">通过</button>' : ''} |
|
||||
${tabActive == '3' || tabActive == '2' ? '<button class="button button-normal checkBtn">恢复待审批</button>' : ''} |
|
||||
</div> |
|
||||
</div>` |
|
||||
$('#data-list').html(html1); |
|
||||
}); |
|
||||
|
|
||||
// 渲染分页按钮
|
|
||||
renderPagination(); |
|
||||
} |
|
||||
|
|
||||
// 渲染分页按钮
|
|
||||
function renderPagination() { |
|
||||
const pageNumbers = $('#page-numbers'); |
|
||||
pageNumbers.empty(); |
|
||||
|
|
||||
// 总页数小于等于 7 时，显示所有页码
|
|
||||
if (totalPages <= 7) { |
|
||||
for (let i = 1; i <= totalPages; i++) { |
|
||||
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
|
||||
} |
|
||||
} else { |
|
||||
// 总页数大于 7 时，显示部分页码并用省略号代替
|
|
||||
if (currentPage <= 4) { |
|
||||
// 前 5 页 + 省略号 + 最后一页
|
|
||||
for (let i = 1; i <= 5; i++) { |
|
||||
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
|
||||
} |
|
||||
pageNumbers.append('<span>...</span>'); |
|
||||
pageNumbers.append(`<span>${totalPages}</span>`); |
|
||||
} else if (currentPage >= totalPages - 3) { |
|
||||
// 第一页 + 省略号 + 最后 5 页
|
|
||||
pageNumbers.append('<span>1</span>'); |
|
||||
pageNumbers.append('<span>...</span>'); |
|
||||
for (let i = totalPages - 4; i <= totalPages; i++) { |
|
||||
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
|
||||
} |
|
||||
} else { |
|
||||
// 第一页 + 省略号 + 当前页及前后两页 + 省略号 + 最后一页
|
|
||||
pageNumbers.append('<span>1</span>'); |
|
||||
pageNumbers.append('<span>...</span>'); |
|
||||
for (let i = currentPage - 2; i <= currentPage + 2; i++) { |
|
||||
pageNumbers.append(`<span class="${i === currentPage ? 'pagActive' : ''}">${i}</span>`); |
|
||||
} |
|
||||
pageNumbers.append('<span>...</span>'); |
|
||||
pageNumbers.append(`<span>${totalPages}</span>`); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 绑定页码点击事件
|
|
||||
pageNumbers.find('span').click(function () { |
|
||||
const page = parseInt($(this).text()); |
|
||||
if (!isNaN(page)) { |
|
||||
currentPage = page; |
|
||||
renderData(); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
// 初始化渲染
|
|
||||
renderData(); |
|
||||
|
|
||||
// 上一页
|
|
||||
$('#prev-page').click(function () { |
|
||||
if (currentPage > 1) { |
|
||||
currentPage--; |
|
||||
renderData(); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 下一页
|
|
||||
$('#next-page').click(function () { |
|
||||
if (currentPage < totalPages) { |
|
||||
currentPage++; |
|
||||
renderData(); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
// 跳转到指定页
|
|
||||
$('#go-to-page').click(function () { |
|
||||
const page = parseInt($('#jump-to-page').val()); |
|
||||
if (page >= 1 && page <= totalPages) { |
|
||||
currentPage = page; |
|
||||
renderData(); |
|
||||
} else { |
|
||||
alert(`请输入有效的页码（1-${totalPages}）`); |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
$('.index-nav-wrap-li').click(function () { |
|
||||
tabActive = $(this).attr('type'); |
|
||||
switch (tabActive) { |
|
||||
case '1': |
|
||||
allData = waitCheck |
|
||||
break |
|
||||
case '2': |
|
||||
allData = checkList |
|
||||
break |
|
||||
case '3': |
|
||||
allData = deletedList |
|
||||
break |
|
||||
} |
|
||||
currentPage = 1; |
|
||||
$('.index-nav-wrap-li span').removeClass('active') |
|
||||
$(this).find('span').addClass('active') |
|
||||
renderData() |
|
||||
}) |
|
||||
|
|
||||
// 仅保存
|
|
||||
// 录入信息
|
|
||||
$('#submit').click(function () { |
|
||||
if ($('.modal').hasClass('editmodal')) { //编辑
|
|
||||
var desc = $('.normal-input').val().trim() |
|
||||
var answer = $('.answer-input').val().trim() |
|
||||
// cur_editdata.id //当前编辑数据 后续用其他参数也可
|
|
||||
|
|
||||
} else if ($('.modal').hasClass('addmodal')) { //新增
|
|
||||
var radio_val = $('.radio-wrap').find('.radio_box_active input').val(); |
|
||||
// 区分信息段、问答
|
|
||||
if (radio_val == '1') { |
|
||||
|
|
||||
} else { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
// $.ajax({
|
|
||||
// type: "post",
|
|
||||
// dataType: 'json',
|
|
||||
// url: '',
|
|
||||
// data: {
|
|
||||
// type
|
|
||||
// },
|
|
||||
|
|
||||
// success: function (res) {}
|
|
||||
// })
|
|
||||
$('.modal, .modal-overlay').fadeOut(); |
|
||||
|
|
||||
}) |
|
||||
// 保存并通过审批
|
|
||||
$('#savePass').click(function () { |
|
||||
// 请求借口
|
|
||||
if ($('.modal').hasClass('editmodal')) { //编辑
|
|
||||
var desc = $('.normal-input').val().trim() |
|
||||
var answer = $('.answer-input').val().trim() |
|
||||
|
|
||||
} else if ($('.modal').hasClass('addmodal')) { //新增
|
|
||||
var radio_val = $('.radio-wrap').find('.radio_box_active input').val(); |
|
||||
// 区分信息段、问答
|
|
||||
if (radio_val == '1') { |
|
||||
|
|
||||
} else { |
|
||||
|
|
||||
} |
|
||||
} |
|
||||
// $.ajax({
|
|
||||
// type: "post",
|
|
||||
// dataType: 'json',
|
|
||||
// url: '',
|
|
||||
// data: {
|
|
||||
// type
|
|
||||
// },
|
|
||||
|
|
||||
// success: function (res) {}
|
|
||||
// })
|
|
||||
$('.modal, .modal-overlay').fadeOut(); |
|
||||
}) |
|
||||
$('.list_all').on('click','deleteBtn',function(){ |
|
||||
// 列表删除
|
|
||||
}) |
|
||||
$('.list_all').on('click','passBtn',function(){ |
|
||||
// 列表通过
|
|
||||
}) |
|
||||
$('.list_all').on('click','checkBtn',function(){ |
|
||||
// 恢复待审批
|
|
||||
}) |
|
||||
|
|
||||
}); |
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,39 +0,0 @@ |
|||||
document.addEventListener('DOMContentLoaded', function() { |
|
||||
const items = document.getElementById('items'); |
|
||||
const pagination = document.getElementById('pagination'); |
|
||||
const data = [/* 这里是你要分页的数据，例如一个包含多个对象的数组 */]; // 示例数据，实际应用中应从服务器获取或定义在外部文件等
|
|
||||
const itemsPerPage = 5; // 每页显示的项目数
|
|
||||
let currentPage = 1; // 当前页码
|
|
||||
|
|
||||
function displayItems(page) { |
|
||||
const startIndex = (page - 1) * itemsPerPage; |
|
||||
const endIndex = startIndex + itemsPerPage; |
|
||||
items.innerHTML = ''; // 清空当前显示的内容
|
|
||||
for (let i = startIndex; i < endIndex && i < data.length; i++) { |
|
||||
const item = document.createElement('li'); |
|
||||
item.textContent = data[i]; // 显示数据项，根据实际情况调整显示内容（例如使用data[i].name等）
|
|
||||
items.appendChild(item); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function displayPagination(totalPages) { |
|
||||
pagination.innerHTML = ''; // 清空现有的分页链接
|
|
||||
for (let i = 1; i <= totalPages; i++) { |
|
||||
const pageItem = document.createElement('li'); |
|
||||
pageItem.textContent = i; |
|
||||
pageItem.onclick = function() { |
|
||||
currentPage = i; |
|
||||
displayItems(currentPage); // 显示当前页的数据项
|
|
||||
displayPagination(totalPages); // 更新分页链接的激活状态
|
|
||||
}; |
|
||||
if (i === currentPage) { |
|
||||
pageItem.classList.add('active'); // 为当前页码添加激活样式
|
|
||||
} |
|
||||
pagination.appendChild(pageItem); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
const totalPages = Math.ceil(data.length / itemsPerPage); // 计算总页数
|
|
||||
displayItems(currentPage); // 初始化显示第一页的数据项
|
|
||||
displayPagination(totalPages); // 初始化分页链接的显示
|
|
||||
}); |
|
||||
Loading…
Reference in new issue