< scriptsrc = " ./element-ui-2.15.10/index.js" > </ script> body,.user-card {
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
}
.card,.level,.points,.avatar {
position : absolute;
left : 50%;
top : 50%;
transform : translate ( -50%, -50%) ;
}
div. innerHTML = template
let body = document. querySelector ( 'body' )
body. append ( div)
let input = document. querySelector ( '.message-body input' )
let cancel = document. querySelector ( '#cancel' )
let confirm = document. querySelector ( '#confirm' )
return new Promise ( ( resolve, reject ) => {
cancel. onclick = function ( ) {
reject ( false )
body. removeChild ( div)
}
confirm. onclick = function ( ) {
resolve ( input. value)
body. removeChild ( div)
}
} )
$ ( ".add" ) . click ( function ( ) {
$ ( '.list .row .col-sm-1' ) . remove ( )
$ ( '.list' ) . append ( initRender ( ` 选项 ${
$ ( '.list>.row' ) . length+ 1 } ` ) )
if ( $ ( '.list>.row' ) . length > 2 ) {
$ ( '.list .row' ) . append ( ` <div class="col-sm-1">
<!-- 删除图标 -->
<img class="del-icon" src="./images/x.svg" alt="" />
</div> ` )
}
} ) ;
$ ( document) . on ( "click" , ".del-icon" , function ( ) {
$ ( this ) . parent ( ) . parent ( ) . remove ( )
if ( $ ( '.list>.row' ) . length <= 2 ) {
$ ( '.list .row .col-sm-1' ) . remove ( )
}
let length = $ ( '.list>.row' ) . length
$ ( '.list .row' ) . remove ( )
for ( let index = 0 ; index < length; index++ ) {
let initList = initRender ( ` 选项 ${
index + 1 } ` ) ;
$ ( ".list" ) . append ( initList) ;
}
if ( $ ( '.list>.row' ) . length > 2 ) {
$ ( '.list .row' ) . append ( ` <div class="col-sm-1">
<!-- 删除图标 -->
<img class="del-icon" src="./images/x.svg" alt="" />
</div> ` )
}
} ) ;
let arr = [
[ "全部" ] ,
[ "小麦" ] ,
[ "大豆" ] ,
[ "马铃薯" ] ,
[ "玉米" ] ,
]
axios ( {
method : 'get' ,
url : './data.json'
} ) . then ( res => {
let data = res. data. data
console. log ( data) ;
for ( const key in data) {
arr[ 0 ] . push ( key)
arr[ 1 ] . push ( data[ key] . wheat)
arr[ 2 ] . push ( data[ key] . soybean)
arr[ 3 ] . push ( data[ key] . potato)
arr[ 4 ] . push ( data[ key] . corn)
}
option. dataset. source = arr
myChart. setOption ( option) ;
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" /> < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" /> < metaname = " viewport" content = " width=device-width, initial-scale=1.0" /> < title> </ title> < linkrel = " stylesheet" href = " css/style.css" /> </ head> < body> < divclass = " active" > < divclass = " first" > < divclass = " first-bac" > < divclass = " first-img" > < imgsrc = " ./images/neirong.png" alt = " " > </ div> </ div> < divclass = " first-bac2" > < divclass = first-title1> < imgsrc = " ./images/title1.png" alt = " " > </ div> < divclass = " quan" > < div> < imgsrc = " ./images/quan1.png" alt = " " > </ div> < div> < imgsrc = " ./images/quan2.png" alt = " " > </ div> < div> < imgsrc = " ./images/quan3.png" alt = " " > </ div> < div> < imgsrc = " ./images/quan4.png" alt = " " > </ div> < div> < imgsrc = " ./images/quan5.png" alt = " " > </ div> </ div> </ div> </ div> < divclass = " two" > < divclass = " two-bac" > < divclass = " bac-center" > < divclass = " center" > < divclass = " top" > < divclass = " top-center" > < divclass = " top-center-left" > < imgsrc = " ./images/pic.png" alt = " " > </ div> < divclass = " top-center-center" > < imgsrc = " ./images/arrow.png" alt = " " > </ div> < divclass = " top-center-right" > < divclass = " title" > < div> </ div> < p> < span> </ span> </ p> </ div> < divclass = " title" > < div> </ div> < p> < span> </ span> </ p> </ div> < divclass = " title" > < div> </ div> < p> < span> </ span> </ p> </ div> < divclass = " title" > < div> </ div> < p> < span> </ span> </ p> </ div> < divclass = " title" > < div> </ div> < p> < span> </ span> </ p> </ div> </ div> </ div> </ div> < divclass = " footer" > < divclass = " footer-one" > < p> </ p> </ div> < divclass = " footer-two" > </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ body> </ html> * {
margin : 0;
padding : 0;
}
.first {
height : 898px;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
.first-bac {
width : 1920px;
height : 506px;
background : url ( '../images/banner-bg.png' ) ;
background-size : 100%;
overflow : hidden;
}
.first-img {
display : flex;
justify-content : center;
height : 499px;
padding-top : 60px;
z-index : 20;
}
.first-img img {
width : 620px;
height : 499px;
z-index : 0;
}
.first-bac2 {
height : 462px;
width : 1990px;
background : url ( '../images/stage.png' ) ;
background-size : 100%;
margin : -40px -35px;
z-index : 999;
display : flex;
flex-direction : column;
align-items : center;
justify-content : space-around;
}
.first-title1 {
width : 646px;
height : 72px;
margin-top : 57px;
}
.first-title1 img {
width : 100%;
height : 100%;
}
.quan {
height : 180px;
display : flex;
justify-content : space-around;
}
.quan div {
margin-left : 20px;
}
.quan img {
width : 100%;
height : 100%;
}
.two {
width : 100%;
height : 1030px;
margin-top : -58px;
display : flex;
justify-content : center;
}
.two-bac {
width : 1920px;
height : 100%;
background : #290897;
display : flex;
justify-content : center;
align-items : center;
position : relative;
}
.bac-center {
width : 1200px;
height : 789px;
background : url ( '../images/bg.png' ) ;
background-size : 100%;
display : flex;
justify-content : center;
align-items : center;
position : absolute;
bottom : 80px;
}
.center {
width : 1120px;
height : 616px;
background : #FFF9E0;
border-radius : 10px;
margin-top : 48px;
display : flex;
flex-direction : column;
}
.top {
height : 438px;
display : flex;
justify-content : center;
align-items : center;
}
.top-center {
width : 1030px;
height : 342px;
display : flex;
align-items : center;
justify-content : space-between;
}
.top-cecter-left {
width : 328px;
height : 342px;
}
.top-center-center {
width : 86px;
height : 60px;
}
.top-center-right {
width : 100%;
height : 100%;
display : flex;
flex-direction : column;
align-items : center;
justify-content : space-between;
margin-left : 40px;
}
.title {
width : 100%;
height : 50px;
display : flex;
align-items : center;
justify-content : flex-start;
}
.title div {
width : 50px;
height : 50px;
background : url ( '../images/free.png' ) ;
}
.title p {
font-family : PingFangSC-Medium;
font-size : 24px;
color : #AA544C;
letter-spacing : 0;
line-height : 33px;
font-weight : 500;
}
.title p span {
font-family : PingFangSC-Semibold;
font-size : 24px;
color : #FF5B13;
letter-spacing : 0;
line-height : 33px;
font-weight : 600;
}
.footer {
width : 100%;
height : 256px;
background : url ( '../images/coupon.png' ) ;
background-size : 100% 100% 100%;
padding : 0;
display : flex;
flex-direction : column;
justify-content : center;
align-items : flex-end;
}
.footer-one {
background-image : linear-gradient ( 180deg, #F4BF60 0%, #F88822 100%) ;
border-radius : 41.5px;
width : 270px;
height : 73px;
margin : 30px 30px;
}
.footer-one p {
font-family : PingFangSC-Semibold;
font-size : 40px;
color : #FFFFFF;
letter-spacing : 4px;
font-weight : 600;
text-align : center;
line-height : 73px;
}
.footer-two {
font-family : PingFangSC-Regular;
font-size : 20px;
color : #FFFFFF;
letter-spacing : 0;
line-height : 36px;
font-weight : 400;
margin : -16px 40px;
}
let http = require ( 'http' ) ;
http. createServer ( ( req, res ) => {
res. setHeader ( "Content-type" , "text/html;charset=utf8" ) ;
let arr = [
{
"channelId" : "5572a108b3cdc86cf39001cd" ,
"name" : "国内焦点"
} ,
{
"channelId" : "5572a108b3cdc86cf39001ce" ,
"name" : "国际焦点"
}
]
if ( req. url== '/news' && req. method == 'GET' ) {
res. end ( JSON . stringify ( arr) )
} else {
res. end ( '404' )
}
} ) . listen ( 8080 )
< divclass = " search-form" > < inputtype = " text" id = " search" class = " search" placeholder = " 词牌名 词句 词人" v-model = " search" @input = " getSearch" /> < ulclass = " suggestions" > < liv-for = " (a,index) in arr2" :key = " index" > < spanclass = " poet" v-html = " getStyle(a.poetry_content)" > </ span> < spanclass = " title" v-html = " getStyle2(a.title,a.author)" > </ span> </ li> </ ul> </ div> let vm = new Vue ( {
el : '#app' ,
data ( ) {
return {
arr1 : [ ] ,
arr2 : [ ] ,
search : ''
}
} ,
created ( ) {
axios ( {
method : 'get' ,
url : './data.json'
} ) . then ( res => {
this . arr1 = res. data
console. log ( res. data) ;
} )
} ,
methods : {
getSearch ( ) {
if ( this . search == '' ) return
this . arr2 = this . arr1. filter ( item => {
if ( item. author. includes ( this . search) || item. title. includes ( this . search) || item. poetry_content. includes ( this . search) ) {
return item
}
} )
} ,
getStyle ( ... args) {
let reg = new RegExp ( this . search, 'g' ) ;
if ( args. length == 1 ) {
let str = args[ 0 ] . replace ( reg, ( word ) => {
return ` <span class="highlight"> ${
word} </span> ` } )
return str
} else {
let str1= args[ 0 ] . replace ( reg, ( word ) => {
return ` <span class="highlight"> ${
word} </span> ` } )
let str2= args[ 1 ] . replace ( reg, ( word ) => {
return ` <span class="highlight"> ${
word} </span> ` } )
return str1+ '-' + str2
}
} ,
}
} )
function convertToTree ( regions, rootId = "0" ) {
let arr = [ ]
regions. forEach ( item => {
if ( item. pid == rootId) {
arr. push ( item)
item. children = convertToTree ( regions, item. id)
}
} )
return arr
}
module. exports = convertToTree;
function findRegion ( regions, regionName ) {
let arr = [ ]
if ( regions[ 0 ] . name == regionName) {
arr. push ( regionName)
return
} else {
regions[ 0 ] . children. forEach ( item => {
if ( item. name == regionName) {
arr. push ( regions[ 0 ] . name)
arr. push ( regionName)
return
} else {
item. children. forEach ( el => {
if ( el. name == regionName) {
arr. push ( regions[ 0 ] . name)
arr. push ( item. name)
arr. push ( regionName)
return
}
} )
}
} )
}
if ( arr. length == 0 || arr. length > 3 ) {
return null
} else {
return arr
}
}
module. exports = findRegion;