打包成一个二进制文件
This commit is contained in:
xing
parent
f6394cf1b3
commit
18eb1cb6ed
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -1,2 +1,6 @@
|
||||||
.idea
|
.idea
|
||||||
newsfetch.iml
|
newsfetch.iml
|
||||||
|
node_modules
|
||||||
|
dist/js
|
||||||
|
dist/css
|
||||||
|
dist/index.html
|
||||||
24
README.md
Normal file
24
README.md
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# vuefetch
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
yarn install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
yarn serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
yarn lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
33
dist/static.go
vendored
Normal file
33
dist/static.go
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
package dist
|
||||||
|
|
||||||
|
import (
|
||||||
|
"embed"
|
||||||
|
"errors"
|
||||||
|
"io/fs"
|
||||||
|
"path/filepath"
|
||||||
|
"strings"
|
||||||
|
)
|
||||||
|
|
||||||
|
type Dist struct {
|
||||||
|
embed.FS
|
||||||
|
}
|
||||||
|
|
||||||
|
//go:embed css js favicon.ico index.html
|
||||||
|
var Static embed.FS
|
||||||
|
|
||||||
|
func (r Dist) Open(name string) (fs.File, error) {
|
||||||
|
if filepath.Separator != '/' && strings.ContainsRune(name, filepath.Separator) {
|
||||||
|
return nil, errors.New("http: invalid character in file path")
|
||||||
|
}
|
||||||
|
fullName := strings.TrimLeft(name, "/")
|
||||||
|
prifix := strings.Split(fullName, ".")
|
||||||
|
l := len(prifix)
|
||||||
|
p := prifix[l-1]
|
||||||
|
if p == "js" || p == "css" {
|
||||||
|
fullName = p + "/" + fullName
|
||||||
|
} else if p == "map" {
|
||||||
|
fullName = "js/" + fullName
|
||||||
|
}
|
||||||
|
file, err := r.FS.Open(fullName)
|
||||||
|
return file, err
|
||||||
|
}
|
||||||
19
jsconfig.json
Normal file
19
jsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
43
main.go
43
main.go
|
|
@ -4,9 +4,13 @@ import (
|
||||||
"github.com/PuerkitoBio/goquery"
|
"github.com/PuerkitoBio/goquery"
|
||||||
"github.com/gin-gonic/gin"
|
"github.com/gin-gonic/gin"
|
||||||
"github.com/gorilla/websocket"
|
"github.com/gorilla/websocket"
|
||||||
|
"github/fthvgb1/newsfetch/dist"
|
||||||
|
"io/ioutil"
|
||||||
"log"
|
"log"
|
||||||
"net/http"
|
"net/http"
|
||||||
|
"os/exec"
|
||||||
"regexp"
|
"regexp"
|
||||||
|
"runtime"
|
||||||
"strconv"
|
"strconv"
|
||||||
"strings"
|
"strings"
|
||||||
"sync"
|
"sync"
|
||||||
|
|
@ -263,6 +267,14 @@ func (f *fetchHandler) cronFetch(conn string, c chan int) {
|
||||||
func main() {
|
func main() {
|
||||||
h := newFetchHandler("https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&rsv_dl=ns_pc&word=")
|
h := newFetchHandler("https://www.baidu.com/s?rtt=1&bsst=1&cl=2&tn=news&rsv_dl=ns_pc&word=")
|
||||||
router := gin.Default()
|
router := gin.Default()
|
||||||
|
static := dist.Dist{
|
||||||
|
FS: dist.Static,
|
||||||
|
}
|
||||||
|
//router.Static("/css", "./dist/css")
|
||||||
|
//router.Static("/js", "./dist/js")
|
||||||
|
router.StaticFS("/js", http.FS(static))
|
||||||
|
router.StaticFS("/css", http.FS(static))
|
||||||
|
//router.StaticFile("/favicon.ico", "dist/favicon.ico")
|
||||||
var upgrader = websocket.Upgrader{
|
var upgrader = websocket.Upgrader{
|
||||||
CheckOrigin: func(r *http.Request) bool {
|
CheckOrigin: func(r *http.Request) bool {
|
||||||
return true
|
return true
|
||||||
|
|
@ -270,13 +282,20 @@ func main() {
|
||||||
}
|
}
|
||||||
go h.sendFetchData()
|
go h.sendFetchData()
|
||||||
go h.receiveMsg()
|
go h.receiveMsg()
|
||||||
router.LoadHTMLGlob("templates/*")
|
router.GET("/", func(c *gin.Context) {
|
||||||
//router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")
|
file, err := static.Open("index.html")
|
||||||
router.GET("/index", func(c *gin.Context) {
|
if err != nil {
|
||||||
c.HTML(http.StatusOK, "index.gohtml", gin.H{
|
c.String(404, "%s", err)
|
||||||
"title": "爬虫",
|
return
|
||||||
})
|
}
|
||||||
|
bytes, err := ioutil.ReadAll(file)
|
||||||
|
if err != nil {
|
||||||
|
c.String(404, "%s", err)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
c.Data(200, "text/html", bytes)
|
||||||
})
|
})
|
||||||
|
|
||||||
router.GET("ws", func(c *gin.Context) {
|
router.GET("ws", func(c *gin.Context) {
|
||||||
conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
|
conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
|
|
@ -317,6 +336,18 @@ func main() {
|
||||||
}
|
}
|
||||||
}()
|
}()
|
||||||
})
|
})
|
||||||
|
go func() {
|
||||||
|
time.Sleep(2 * time.Second)
|
||||||
|
url := "http://127.0.0.1:8080"
|
||||||
|
switch runtime.GOOS {
|
||||||
|
case "linux":
|
||||||
|
exec.Command(`xdg-open`, url).Start()
|
||||||
|
case "windows":
|
||||||
|
exec.Command(`cmd`, `/c`, `start`, url).Start()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}()
|
||||||
err := router.Run(":8080")
|
err := router.Run(":8080")
|
||||||
if err != nil {
|
if err != nil {
|
||||||
panic(err)
|
panic(err)
|
||||||
|
|
|
||||||
49
package.json
Normal file
49
package.json
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
{
|
||||||
|
"name": "vuefetch",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"async-validator": "^4.2.5",
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"element-plus": "^2.2.8",
|
||||||
|
"vue": "^3.2.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@mdi/font": "^6.9.96",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"node-sass": "^7.0.1",
|
||||||
|
"unplugin-auto-import": "^0.9.2",
|
||||||
|
"unplugin-vue-components": "^0.21.1"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/vue3-essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "@babel/eslint-parser"
|
||||||
|
},
|
||||||
|
"rules": {}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead",
|
||||||
|
"not ie 11"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
public/index.html
Normal file
17
public/index.html
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
25
src/App.vue
Normal file
25
src/App.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<HelloWorld />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import HelloWorld from './components/WelCome'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
HelloWorld
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
31
src/assets/css/globel.css
Normal file
31
src/assets/css/globel.css
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
html,body,#app{
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 1366px;
|
||||||
|
}
|
||||||
|
.el-breadcrumb {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-card {
|
||||||
|
box-shadow: 0 1px 1px rgba(0,0,0, .15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.el-pagination {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
.el-steps{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.el-step__title{
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.quill-editor .ql-container {
|
||||||
|
min-height: 300px;;
|
||||||
|
}
|
||||||
370
src/assets/fonts/demo.css
Executable file
370
src/assets/fonts/demo.css
Executable file
|
|
@ -0,0 +1,370 @@
|
||||||
|
*{margin: 0;padding: 0;list-style: none;}
|
||||||
|
/*
|
||||||
|
KISSY CSS Reset
|
||||||
|
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
|
||||||
|
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
|
||||||
|
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
|
||||||
|
特色：1. 适应中文；2. 基于最新主流浏览器。
|
||||||
|
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 清除内外边距 **/
|
||||||
|
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
|
||||||
|
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
|
||||||
|
pre, /* text formatting elements 文本格式元素 */
|
||||||
|
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
|
||||||
|
th, td /* table elements 表格元素 */ {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 设置默认字体 **/
|
||||||
|
body,
|
||||||
|
button, input, select, textarea /* for ie */ {
|
||||||
|
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
|
||||||
|
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
|
||||||
|
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
|
||||||
|
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
|
||||||
|
|
||||||
|
/** 重置列表元素 **/
|
||||||
|
ul, ol { list-style: none; }
|
||||||
|
|
||||||
|
/** 重置文本格式元素 **/
|
||||||
|
a { text-decoration: none; }
|
||||||
|
a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
|
||||||
|
/** 重置表单元素 **/
|
||||||
|
legend { color: #000; } /* for ie6 */
|
||||||
|
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
|
||||||
|
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
|
||||||
|
/* 注：optgroup 无法扶正 */
|
||||||
|
|
||||||
|
/** 重置表格元素 **/
|
||||||
|
table { border-collapse: collapse; border-spacing: 0; }
|
||||||
|
|
||||||
|
/* 清除浮动 */
|
||||||
|
.ks-clear:after, .clear:after {
|
||||||
|
content: '\20';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.ks-clear, .clear {
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
|
||||||
|
|
||||||
|
.helps{margin-top:40px;}
|
||||||
|
.helps pre{
|
||||||
|
padding:20px;
|
||||||
|
margin:10px 0;
|
||||||
|
border:solid 1px #e7e1cd;
|
||||||
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists{
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li{
|
||||||
|
float:left;
|
||||||
|
width: 100px;
|
||||||
|
height:180px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
}
|
||||||
|
.icon_lists .icon{
|
||||||
|
font-size: 42px;
|
||||||
|
line-height: 100px;
|
||||||
|
margin: 10px 0;
|
||||||
|
color:#333;
|
||||||
|
-webkit-transition: font-size 0.25s ease-out 0s;
|
||||||
|
-moz-transition: font-size 0.25s ease-out 0s;
|
||||||
|
transition: font-size 0.25s ease-out 0s;
|
||||||
|
|
||||||
|
}
|
||||||
|
.icon_lists .icon:hover{
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.markdown {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: #404040;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p,
|
||||||
|
.markdown pre {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > p,
|
||||||
|
.markdown > blockquote,
|
||||||
|
.markdown > .highlight,
|
||||||
|
.markdown > ol,
|
||||||
|
.markdown > ul {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul > li {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ul li,
|
||||||
|
.markdown blockquote ul > li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ul li p,
|
||||||
|
.markdown > ol li p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol > li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ol li,
|
||||||
|
.markdown blockquote ol > li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre {
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre code {
|
||||||
|
border: none;
|
||||||
|
background: #f7f7f7;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
width: 95%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th,
|
||||||
|
.markdown > table td {
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > br,
|
||||||
|
.markdown > p > br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-strong,
|
||||||
|
.hljs-emphasis,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-type {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name {
|
||||||
|
color: #63a35c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre{
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
99
src/assets/fonts/demo_fontclass.html
Executable file
99
src/assets/fonts/demo_fontclass.html
Executable file
|
|
@ -0,0 +1,99 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<link rel="stylesheet" href="iconfont.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-showpassword"></i>
|
||||||
|
<div class="name">show-password </div>
|
||||||
|
<div class="fontclass">.icon-showpassword</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-user"></i>
|
||||||
|
<div class="name">user</div>
|
||||||
|
<div class="fontclass">.icon-user</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-users"></i>
|
||||||
|
<div class="name">users</div>
|
||||||
|
<div class="fontclass">.icon-users</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-3702mima"></i>
|
||||||
|
<div class="name">password-b</div>
|
||||||
|
<div class="fontclass">.icon-3702mima</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-shangpin"></i>
|
||||||
|
<div class="name">06商品</div>
|
||||||
|
<div class="fontclass">.icon-shangpin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-danju"></i>
|
||||||
|
<div class="name">25单据</div>
|
||||||
|
<div class="fontclass">.icon-danju</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-tijikongjian"></i>
|
||||||
|
<div class="name">28体积、空间</div>
|
||||||
|
<div class="fontclass">.icon-tijikongjian</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-morentouxiang"></i>
|
||||||
|
<div class="name">225默认头像</div>
|
||||||
|
<div class="fontclass">.icon-morentouxiang</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-baobiao"></i>
|
||||||
|
<div class="name">406报表</div>
|
||||||
|
<div class="fontclass">.icon-baobiao</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-lock_fill"></i>
|
||||||
|
<div class="name">lock_fill</div>
|
||||||
|
<div class="fontclass">.icon-lock_fill</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="font-class-">font-class引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与unicode使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
|
||||||
|
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
|
||||||
|
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
|
||||||
|
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
|
||||||
|
|
||||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
143
src/assets/fonts/demo_symbol.html
Executable file
143
src/assets/fonts/demo_symbol.html
Executable file
|
|
@ -0,0 +1,143 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em; height: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-showpassword"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">show-password </div>
|
||||||
|
<div class="fontclass">#icon-showpassword</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-user"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">user</div>
|
||||||
|
<div class="fontclass">#icon-user</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-users"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">users</div>
|
||||||
|
<div class="fontclass">#icon-users</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-3702mima"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">password-b</div>
|
||||||
|
<div class="fontclass">#icon-3702mima</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-shangpin"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">06商品</div>
|
||||||
|
<div class="fontclass">#icon-shangpin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-danju"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">25单据</div>
|
||||||
|
<div class="fontclass">#icon-danju</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-tijikongjian"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">28体积、空间</div>
|
||||||
|
<div class="fontclass">#icon-tijikongjian</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-morentouxiang"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">225默认头像</div>
|
||||||
|
<div class="fontclass">#icon-morentouxiang</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-baobiao"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">406报表</div>
|
||||||
|
<div class="fontclass">#icon-baobiao</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-lock_fill"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">lock_fill</div>
|
||||||
|
<div class="fontclass">#icon-lock_fill</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="symbol-">symbol引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||||
|
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
|
||||||
|
<li>兼容性较差，支持 ie9+,及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染svg的性能一般，还不如png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
|
||||||
|
.icon {
|
||||||
|
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
|
||||||
|
vertical-align: <span class="hljs-number">-0.15</span>em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
<<span class="hljs-regexp">/style></span></code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
|
||||||
|
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
|
||||||
|
</span><<span class="hljs-regexp">/svg>
|
||||||
|
</span></code></pre>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
138
src/assets/fonts/demo_unicode.html
Executable file
138
src/assets/fonts/demo_unicode.html
Executable file
|
|
@ -0,0 +1,138 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('iconfont.eot'); /* IE9*/
|
||||||
|
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url('iconfont.woff') format('woff'), /* chrome, firefox */
|
||||||
|
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: 0.2px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">show-password </div>
|
||||||
|
<div class="code">&#xea3f;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">user</div>
|
||||||
|
<div class="code">&#xe89a;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">users</div>
|
||||||
|
<div class="code">&#xe8b5;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">password-b</div>
|
||||||
|
<div class="code">&#xe66c;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">06商品</div>
|
||||||
|
<div class="code">&#xe888;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">25单据</div>
|
||||||
|
<div class="code">&#xe89b;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">28体积、空间</div>
|
||||||
|
<div class="code">&#xe89f;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">225默认头像</div>
|
||||||
|
<div class="code">&#xe8c9;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">406报表</div>
|
||||||
|
<div class="code">&#xe902;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">lock_fill</div>
|
||||||
|
<div class="code">&#xe709;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<h2 id="unicode-">unicode引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>unicode是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>unicode使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript">@font-face {
|
||||||
|
font-family: <span class="hljs-string">'iconfont'</span>;
|
||||||
|
src: url(<span class="hljs-string">'iconfont.eot'</span>);
|
||||||
|
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript">.iconfont{
|
||||||
|
font-family:<span class="hljs-string">"iconfont"</span> !important;
|
||||||
|
font-size:<span class="hljs-number">16</span>px;font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
37
src/assets/fonts/iconfont.css
Executable file
37
src/assets/fonts/iconfont.css
Executable file
|
|
@ -0,0 +1,37 @@
|
||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('iconfont.eot?t=1523541245904'); /* IE9*/
|
||||||
|
src: url('iconfont.eot?t=1523541245904#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1523541245904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url('iconfont.svg?t=1523541245904#iconfont') format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-showpassword:before { content: "\ea3f"; }
|
||||||
|
|
||||||
|
.icon-user:before { content: "\e89a"; }
|
||||||
|
|
||||||
|
.icon-users:before { content: "\e8b5"; }
|
||||||
|
|
||||||
|
.icon-3702mima:before { content: "\e66c"; }
|
||||||
|
|
||||||
|
.icon-shangpin:before { content: "\e888"; }
|
||||||
|
|
||||||
|
.icon-danju:before { content: "\e89b"; }
|
||||||
|
|
||||||
|
.icon-tijikongjian:before { content: "\e89f"; }
|
||||||
|
|
||||||
|
.icon-morentouxiang:before { content: "\e8c9"; }
|
||||||
|
|
||||||
|
.icon-baobiao:before { content: "\e902"; }
|
||||||
|
|
||||||
|
.icon-lock_fill:before { content: "\e709"; }
|
||||||
|
|
||||||
BIN
src/assets/fonts/iconfont.eot
Executable file
BIN
src/assets/fonts/iconfont.eot
Executable file
Binary file not shown.
86
src/assets/fonts/iconfont.js
Executable file
86
src/assets/fonts/iconfont.js
Executable file
File diff suppressed because one or more lines are too long
63
src/assets/fonts/iconfont.svg
Executable file
63
src/assets/fonts/iconfont.svg
Executable file
|
|
@ -0,0 +1,63 @@
|
||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<!--
|
||||||
|
2013-9-30: Created.
|
||||||
|
-->
|
||||||
|
<svg>
|
||||||
|
<metadata>
|
||||||
|
Created by iconfont
|
||||||
|
</metadata>
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
<font id="iconfont" horiz-adv-x="1024" >
|
||||||
|
<font-face
|
||||||
|
font-family="iconfont"
|
||||||
|
font-weight="500"
|
||||||
|
font-stretch="normal"
|
||||||
|
units-per-em="1024"
|
||||||
|
ascent="896"
|
||||||
|
descent="-128"
|
||||||
|
/>
|
||||||
|
<missing-glyph />
|
||||||
|
|
||||||
|
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
|
||||||
|
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
|
||||||
|
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
|
||||||
|
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="showpassword" unicode="" d="M1024 300c0-96-211.2-307.2-512-307.2-294.4 0-512 204.8-512 307.2s217.6 307.2 512 307.2c300.8 0 512-204.8 512-307.2l0 0zM512 549.6c-134.4 0-243.2-108.8-243.2-249.6s108.8-249.6 249.6-249.6c134.4 0 249.6 115.2 249.6 249.6-6.4 140.8-121.6 249.6-256 249.6l0 0zM512 460c-89.6 0-160-70.4-160-160s70.4-160 160-160c89.6 0 160 70.4 160 160s-70.4 160-160 160l0 0z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="user" unicode="" d="M622.816 193.28c-22.112 3.52-22.624 64.32-22.624 64.32s64.96 64.32 79.136 150.816c38.08 0 61.632 91.936 23.52 124.288C704.448 566.72 751.808 800 512 800c-239.808 0-192.448-233.28-190.88-267.328-38.08-32.352-14.56-124.288 23.52-124.288 14.144-86.496 79.136-150.816 79.136-150.816s-0.512-60.8-22.624-64.32C329.952 181.92 64 64.64 64-64l448 0 448 0C960 64.64 694.048 181.92 622.816 193.28z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="users" unicode="" d="M735.008 90.624c-18.944 2.976-19.392 54.656-19.392 54.656s55.68 54.656 67.808 128.16c32.64 0 52.8 78.144 20.16 105.632 1.376 28.928 41.984 227.168-163.584 227.168-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C483.968 80.992 256-18.688 256-128l384 0 384 0C1024-18.688 796.032 80.992 735.008 90.624zM344.064 73.184c44.096 27.136 97.632 52.32 141.536 67.424-15.744 22.432-33.28 52.928-44.32 89.056-15.392 12.576-27.936 30.528-36 52.608-8.064 22.112-11.136 46.848-8.608 69.696 1.792 16.384 6.464 31.68 13.664 45.088-4.352 46.592-7.424 138.048 52.448 204.736 23.2 25.856 52.544 44.448 87.712 55.68C544.192 722.24 511.296 798.24 384 798.24c-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C227.968 272.992 0 173.312 0 64l329.6 0C334.304 67.072 339.104 70.144 344.064 73.184z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="3702mima" unicode="" d="M893.532041 14.644791l-0.284479 392.855436c-1.805112 41.266869-35.472909 74.250074-77.136821 74.419943l-50.869574-0.029676 0 35.523051 0.191358 0 0.170892 81.20344c0 2.183735-0.285502 4.273327-0.647753 6.363941-2.829442 123.525338-101.722776 223.293599-224.985124 227.214908l0 1.137916C414.498874 831.871447 313.084113 731.117742 310.218856 606.004233c-0.361227-2.090615-0.64673-4.180206-0.64673-6.363941l0.170892-81.20344 0.191358 0 0-36.477796-0.094144 0 0-0.323365-42.272779-0.019443c-2.596128-0.115634-5.158487-0.358157-7.682983-0.720408l-0.819668 0c-41.663912-0.169869-75.331709-33.152051-77.136821-74.419943l-0.284479-392.855436c0.209778-42.786479 34.921347-77.441766 77.763085-77.441766l38.911218 0 0-0.037862 466.923362-0.265036 0 0.302899 38.910195 0c4.331655 0 8.575306 0.370437 12.71458 1.050935C859.199095-62.181969 893.32431-27.774321 893.532041 14.644791zM387.811048 599.905328c0.514723 82.71998 65.588811 150.08832 147.393955 154.210197l0-0.847298c84.028788-1.687432 151.633512-70.065775 152.158469-154.386206l0.454348 0c0-0.095167-0.036839-0.170892-0.036839-0.265036l-0.26299-116.770494-299.860439-0.172939-0.265036 117.966739c0 0.094144-0.037862 0.169869-0.037862 0.265036L387.811048 599.905328z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="shangpin" unicode="" d="M832 640H640V735.2c0 17.6-14.4 32.8-32.8 32.8H416c-17.6 0-32.8-14.4-32.8-32.8V640H192l-64-576c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64l-64 576z m-384 64h128v-64H448v64z m-0.8-192H384v63.2h63.2V512zM640 512h-63.2v63.2H640V512z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="danju" unicode="" d="M800 704H640c0 70.4-57.6 128-128 128s-128-57.6-128-128H224c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h576c17.6 0 32 14.4 32 32V672c0 17.6-14.4 32-32 32z m-288 32c17.6 0 32-14.4 32-32s-14.4-32-32-32-32 14.4-32 32 14.4 32 32 32z m64-608H320v64h256v-64z m128 128H320v64h384v-64z m0 128H320v64h384v-64z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="tijikongjian" unicode="" d="M496 0.8L138.4 124.8c-6.4 2.4-10.4 8-10.4 15.2V608.8l368-112v-496z m32 0l357.6 124c6.4 2.4 10.4 8 10.4 15.2V608.8l-368-112v-496z m-400 640l384-112 384 112-379.2 125.6c-3.2 0.8-7.2 0.8-10.4 0L128 640.8z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="morentouxiang" unicode="" d="M512 832C264.8 832 64 631.2 64 384s200.8-448 448-448 448 200.8 448 448S759.2 832 512 832zM384.8 520c4 64 56 115.2 120 119.2 74.4 4 135.2-55.2 135.2-128 0-70.4-57.6-128-128-128-73.6 0-132 62.4-127.2 136.8zM768 149.6c0-12-9.6-21.6-21.6-21.6H278.4c-12 0-21.6 9.6-21.6 21.6v64c0 84.8 170.4 128 255.2 128 84.8 0 255.2-42.4 255.2-128l0.8-64z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="baobiao" unicode="" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32zM790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="lock_fill" unicode="" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392zM544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</font>
|
||||||
|
</defs></svg>
|
||||||
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/fonts/iconfont.ttf
Executable file
BIN
src/assets/fonts/iconfont.ttf
Executable file
Binary file not shown.
BIN
src/assets/fonts/iconfont.woff
Executable file
BIN
src/assets/fonts/iconfont.woff
Executable file
Binary file not shown.
BIN
src/assets/images/logo-qt.png
Normal file
BIN
src/assets/images/logo-qt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
58
src/components/HelloWorld.vue
Normal file
58
src/components/HelloWorld.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
<template>
|
||||||
|
<div class="hello">
|
||||||
|
<h1>{{ msg }}</h1>
|
||||||
|
<p>
|
||||||
|
For a guide and recipes on how to configure / customize this project,<br>
|
||||||
|
check out the
|
||||||
|
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||||
|
</p>
|
||||||
|
<h3>Installed CLI Plugins</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Essential Links</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||||
|
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||||
|
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||||
|
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||||
|
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||||
|
</ul>
|
||||||
|
<h3>Ecosystem</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||||
|
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||||
|
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||||
|
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'HelloWorld',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
<style scoped>
|
||||||
|
h3 {
|
||||||
|
margin: 40px 0 0;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #42b983;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
156
src/components/WelCome.vue
Normal file
156
src/components/WelCome.vue
Normal file
|
|
@ -0,0 +1,156 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>新闻抓取</h1>
|
||||||
|
<el-form ref="formRef" class="login-from" :rules="formRules" :model="form">
|
||||||
|
<el-form-item prop="keyword" label="关键词">
|
||||||
|
<el-input v-model="form.keyword" ></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password" label="搜索间隔时间，单位为秒">
|
||||||
|
<el-input v-model="form.timeStep" type="number" step="1" ></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item class="btns">
|
||||||
|
<el-button @click="submit" type="primary">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-table
|
||||||
|
:data="rowss" border stripe
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
label="#"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="标题">
|
||||||
|
<template #default="scope" >
|
||||||
|
<el-tooltip :manual="true" :visible="true" v-if="scope.row.isNew" class="item" effect="dark" content="new" placement="right-start">
|
||||||
|
<a :href="scope.row.url" @click="see(scope.row)" target="_blank">{{scope.row.title}}</a>
|
||||||
|
</el-tooltip>
|
||||||
|
<a v-else :href="scope.row.url" target="_blank">{{scope.row.title}}</a>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="desc"
|
||||||
|
label="描述"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="date"
|
||||||
|
label="发布时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="created_time"
|
||||||
|
label="抓取时间"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="params.pagenum"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
:page-size="params.pagesize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="total">
|
||||||
|
</el-pagination>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'WelCome',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
keyword: '纪检',
|
||||||
|
timeStep: 60
|
||||||
|
},
|
||||||
|
ws: null,
|
||||||
|
formRules: {
|
||||||
|
keyword: [
|
||||||
|
{ required: true, message: '请输入查询的关键词', trigger: 'blur' },
|
||||||
|
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
timeStep: [
|
||||||
|
{ required: true, message: '请输入时间间隔，单位为秒', trigger: 'blur' },
|
||||||
|
{ min: 1, max: 10000000, message: '长度在 1 到 10000000 秒', trigger: 'blur' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
rows: [],
|
||||||
|
params: {
|
||||||
|
query: '',
|
||||||
|
pagesize: 10,
|
||||||
|
pagenum: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
total: function () {
|
||||||
|
return this.rows.length
|
||||||
|
},
|
||||||
|
rowss: function () {
|
||||||
|
return this.list()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
list () {
|
||||||
|
const start = (this.params.pagenum - 1) * this.params.pagesize
|
||||||
|
return this.rows.slice(start, this.params.pagesize + start)
|
||||||
|
},
|
||||||
|
submit () {
|
||||||
|
this.$refs.formRef.validate(async valid => {
|
||||||
|
if (!valid) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.ws.send(JSON.stringify({
|
||||||
|
action: 'search',
|
||||||
|
Data: this.form
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
},
|
||||||
|
check (row) {
|
||||||
|
window.open(row.url, '_blank')
|
||||||
|
},
|
||||||
|
handleSizeChange (val) {
|
||||||
|
this.params.pagesize = val
|
||||||
|
this.list()
|
||||||
|
},
|
||||||
|
handleCurrentChange (val) {
|
||||||
|
this.params.pagenum = val
|
||||||
|
this.list()
|
||||||
|
},
|
||||||
|
see (row) {
|
||||||
|
row.isNew = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
if (!this.ws) {
|
||||||
|
this.ws = new WebSocket('ws://127.0.0.1:8080/ws')
|
||||||
|
this.ws.addEventListener('message', e => {
|
||||||
|
const msg = JSON.parse(e.data)
|
||||||
|
msg.Data.forEach(v => {
|
||||||
|
v.isNew = true
|
||||||
|
})
|
||||||
|
this.rows.unshift(...msg.Data)
|
||||||
|
Notification.requestPermission(function () {
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
const n = new Notification('有新抓取文章', { body: msg.Data[0].title + '等总共' + msg.Data.length + '条' })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.ws.onclose = () => {
|
||||||
|
const a = setInterval(() => {
|
||||||
|
this.ws.open('ws://127.0.0.1:8080/ws')
|
||||||
|
clearInterval(a)
|
||||||
|
}, 15000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
9
src/main.js
Normal file
9
src/main.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import {createApp} from 'vue'
|
||||||
|
import ElementPlus from 'element-plus'
|
||||||
|
import 'element-plus/dist/index.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
app.use(ElementPlus)
|
||||||
|
app.mount('#app')
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<title>
|
|
||||||
{{ .title }}
|
|
||||||
</title>
|
|
||||||
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="app">
|
|
||||||
<el-input class="w-50 m-2"
|
|
||||||
size="large" v-model="keyword" placeholder="搜索的关键词"></el-input>
|
|
||||||
<el-input class="w-50 m-2"
|
|
||||||
size="large" v-model="timeStep" placeholder="定时搜索的时间间隔，单位为秒，默认60秒"></el-input>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
<script src="https://unpkg.com/vue@3.2.36/dist/vue.global.js"></script>
|
|
||||||
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
|
|
||||||
<script>
|
|
||||||
const app = Vue.createApp({
|
|
||||||
delimiters: ['${', '}'] ,
|
|
||||||
data(){
|
|
||||||
return {
|
|
||||||
keyword:'{{ .keyword }}',
|
|
||||||
timeStep: {{ .timeStep }},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
app.use(ElementPlus);
|
|
||||||
app.mount('#app')
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
4
vue.config.js
Normal file
4
vue.config.js
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true,
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user