diff --git "a/\350\222\213\345\256\207\350\266\205/20220329_vue_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html" "b/\350\222\213\345\256\207\350\266\205/20220329_vue_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html" new file mode 100644 index 0000000000000000000000000000000000000000..3785916372da6607070af788980b6e6dc6d9c1d8 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220329_vue_el\346\214\202\350\275\275\347\202\271+data\345\261\236\346\200\247/threeKingdom.html" @@ -0,0 +1,74 @@ + + + + + + + 三国杀移动版 + + + + + +
+

武将列表--->

+ 最新武将: +
{{role.name}} / {{role.grade}}
+
    +
  1. {{role.name}} / {{role.grade}}
    2. +
+
+ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220330_vue_\346\250\241\346\235\277\350\257\255\345\235\227/index.html" "b/\350\222\213\345\256\207\350\266\205/20220330_vue_\346\250\241\346\235\277\350\257\255\345\235\227/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..5f4da5095b8a3123ab87790aa3737214fed91bff --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220330_vue_\346\250\241\346\235\277\350\257\255\345\235\227/index.html" @@ -0,0 +1,116 @@ + + + + + + + Document + + vue模板语块 + + + +

课堂总结

+
+

v-text:

+
Hello,{{text}}
+
你好,
+
+

总结：v-text的内容会覆盖原html标签内的文本，此外,v-text的内容含有html标签，会将标签一并输出

+
+

v-html:

+
11
+
11
+

总结：v-html的内容会覆盖原html标签内的文本，此外,v-html相当于innerHTML,标签的样式也会一并输出

+
+
+
+

v-bind:

+

自定义额外id参数:

+
原id为：{{id}}, 打开F12,此时quq的id为id="0_quq_1"
+

同理,也可自定义额外class参数:

+
打开F12,此时这个标签加上了class="class1"
+

给一个a绑定href属性：

+ 百度 +

显示/不显示

+
div是否还显示 //无效......
+ //disabled的值为true,则按钮变灰 +
+
+ +

trim()方法去空格：

+
{{message.trim()}}
+
{{echo(message)}} //echo，F12查看代码有前后空格，将message的值输出了
+ +
+
+

条件渲染 v-if/v-else-if/v-else:

+
if显示
+ +
else 显示
+

result 的值：为false就显示else,为true显示if的值

+ +

v-show:

+
+ 此处v-show为true, + 而当v-show为false时，仅仅是将元素的display属性设置为none而已。 +
+
+
+
+
div点击我
+ +
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/css/register.css" "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/css/register.css" new file mode 100644 index 0000000000000000000000000000000000000000..200509c14b3ed74bfdbd50e16e4cc9329e9008a7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/css/register.css" @@ -0,0 +1,50 @@ +*{ + margin: 0; + padding: 0; +} + +body { + background-color: #F3F3F3; +} + +#container { + width: 450px; + height: 300px; + margin: 100px auto; + padding:20px 0 ; + background-color:#fff; + border-radius: 10px; + text-align: center; + line-height: 30px; +} + +#container h2 { + text-align: center; + color: sandybrown; +} + +label { + width: 80px; + text-align: left; + display: inline-block; + padding:5px; +} + +input { + width: 200px; + height: 30px; +} + +span { + text-align: right; +} + +button { + width: 150px; + height: 30px; + margin: 15px 0 0 50px; + background-color:#79C4EC; + border-radius: 5px; + border: none; + border-color:lightgray; +} \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/html/register.html" "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/html/register.html" new file mode 100644 index 0000000000000000000000000000000000000000..7b45b664b8a145a6d1c7a68dee1a1a7c9dd83c74 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/html/register.html" @@ -0,0 +1,102 @@ + + + + + + + + + 注册页面 + + + +
+
+
+

注册页面

+
+ +
+ "手机号格式正确" + "手机号格式错误" +
+
+ + +
+ "密码格式正确" + "密码格式错误" +
+
+ + +
+ "两次密码一致" + "两次密码不一致" +
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/js/register.js" "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/js/register.js" new file mode 100644 index 0000000000000000000000000000000000000000..e75e4c99aaf72908345707cfaf0aeb51ab7862ef --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220331_vue_\346\263\250\345\206\214\351\241\265\351\235\242/js/register.js" @@ -0,0 +1,52 @@ +let app = new Vue({ + el: "#app", + data: { + phoneNumber: "", + checkPhoneOK: false, + checkPhoneNotOK: false, + password: "", + checkPasswordOK: false, + checkPasswordNotOK: false, + confirmPassword: "", + PasswordOK:false, + PasswordNotOK:false, + }, + methods: { + checkPhone: function () { + // if(this.phoneNumber = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/) this.checkPhoneOK = true; + // else this.checkPhoneOK = false; + const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; + if (reg.test(this.phoneNumber)) this.checkPhoneOK = true, this.checkPhoneNotOK = false; + else this.checkPhoneOK = false, this.checkPhoneNotOK = true; + }, + checkPassword: function () { + let reg2 = /^[a-zA-Z]{1}/; + // if(reg2.test(this.password) && this.password.length >8) this.checkPasswordOK = true; + // else this.checkPasswordNotOK = true; + if (this.password.length > 8 && reg2.test(this.password)) { + this.checkPasswordNotOK = false; + this.checkPasswordOK = true; + } else { + this.checkPasswordOK = false; + this.checkPasswordNotOK = true; + } + }, + checkPasswords: function () { + if (this.confirmPassword == this.password) { + this.PasswordOK = true; + this.PasswordNotOK = false; + } else { + this.PasswordOK = false; + this.PasswordNotOK = true; + } + }, + alert:function() { + if(this.checkPhoneOK == true && this.checkPasswordOK == true && this.PasswordOK == true) { + window.alert('注册成功！'); + } + else { + window.alert('注册失败！请检查手机号和密码格式！'); + } + } + } +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/.vscode/settings.json" "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/.vscode/settings.json" new file mode 100644 index 0000000000000000000000000000000000000000..f673a71b7a275609030462c0278586d61e5f3a00 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/.vscode/settings.json" @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/css/commodity.css" "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/css/commodity.css" new file mode 100644 index 0000000000000000000000000000000000000000..26c16a707b9a6e1990c55a2dbce90d404711f4c2 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/css/commodity.css" @@ -0,0 +1,50 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: #E1E7EA; +} + +#app { + width: 580px; + height: 100%; + margin: 0 auto; + /* border: 1px solid black; */ +} + +h2 { + text-align: center; + color:tomato; +} + + +ul li { + list-style: none; + float: left; + display: block; + background-color: #fff; + width: 280px; + margin: 5px; +} + +ul #price { + margin-left:80px; + color: red; + font-family: arial; + line-height: 1; + font-size: 24px; +} + +ul #title { + /*居中*/ + display:block; + text-align: center; + font-size: 17px; +} + +a { + text-decoration: none; + color: #333; +} \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/html/commodity.html" "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/html/commodity.html" new file mode 100644 index 0000000000000000000000000000000000000000..9a97fee464fb489fb15f8ad5001d5955ec7ef092 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220401_vue_\345\225\206\345\223\201\345\210\227\350\241\250\351\241\265\351\235\242/html/commodity.html" @@ -0,0 +1,71 @@ + + + + + + + + + 商品列表页 + + + + +
+

商品列表

+ +
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/detail.css" "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/detail.css" new file mode 100644 index 0000000000000000000000000000000000000000..fb1c7c20a0c8af9c563d49d17c2970f3399b38b7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/detail.css" @@ -0,0 +1,55 @@ +* { + margin: 0; + padding: 0; +} + +body { + background-color: #E1E7EA; +} + +#all { + width: 300px; + height: 90px; + background-color: #ff0000; + position: relative; + margin: 0 auto; +} + +#all h2 { + text-align: center; + color: #fff; +} + +#all h4 { + text-align: center; + color: #fff; +} + +img { + padding: 18px 0 0 0 ; + width: 300px; + margin-right: 100px; +} + +span { + font-size: 20px; + font-family: arial; +} + +#title { + font-size: 17px; +} + +#price, #afterPrice { + color: red; + line-height: 1; +} +/* +#refresh { + cursor: pointer; + color:blueviolet; +} + +#refresh:hover { + color:lightblue; +} */ \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/detail.html" "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/detail.html" new file mode 100644 index 0000000000000000000000000000000000000000..5ee3bfc7384de12e431a6f45f8785a594eb7889b --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/detail.html" @@ -0,0 +1,162 @@ + + + + + + + 商品详情页 + + + + + + +
+
+

正在秒杀


+
+

距离结束: {{hour}}:{{minute}}:{{second}}

+ + + + Jeep吉普黑骑士智能手表4G通话上网微信电子表成人中学生手表男 +
+
+ 原价:￥1698.00 +
+
+ + 限时折扣价: ? + + +
+
+
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/img/01.jpg" "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/img/01.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..527aa8b54b1213611de594ac7e3b9a5071251017 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/img/01.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/\345\200\222\350\256\241\346\227\266.html" "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/\345\200\222\350\256\241\346\227\266.html" new file mode 100644 index 0000000000000000000000000000000000000000..630b62f6fc7ee354296e6253471ad88805cb0125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220406_vue_\345\225\206\345\223\201\350\257\246\346\203\205\351\241\265\351\235\242/\345\200\222\350\256\241\346\227\266.html" @@ -0,0 +1,92 @@ + + + + + + + + Document + + +
+

倒计时：{{hour}}:{{minute}}:{{second}}

+
+ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/css/register.css" "b/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/css/register.css" new file mode 100644 index 0000000000000000000000000000000000000000..4fb18251281c3ffdc3a3217e9c6b77acbeaeac0e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/css/register.css" @@ -0,0 +1,62 @@ +*{ + margin: 0; + padding: 0; +} + +body { + background-color: #F3F3F3; +} + +h2 { + text-align: center; + color: sandybrown; + margin: 30px auto; + font-size: 30px; +} +#container { + width: 450px; + height: 300px; + margin: 0 auto; + /* padding:20px 0 ; */ + background-color:#fff; + border-radius: 10px; + text-align: center; + line-height: 30px; +} + +#top { + width: 180px; +} +#top input { + width: 180px; + height: 30px; + margin-left: 15px; + padding: 5px 0 ; + margin: 5px 0; +} + +span { + margin-left: 20px; +} + +label { + width: 80px; + text-align: right; + display: inline-block; + font-size: 15px; + font-family: arial; + color: #666; + /* padding:5px; */ +} + +#bottom label{ + width: 40px; +} + + +button { + width: 60px; + height: 30px; + /* display: block; + margin: 0 auto; */ +} \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/html/register.html" "b/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/html/register.html" new file mode 100644 index 0000000000000000000000000000000000000000..f30dc74ddb022fbe158e1875412f9ee29d0b8c04 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/html/register.html" @@ -0,0 +1,168 @@ + + + + + + + + + + 注册页面 + + + +
+

注册页面

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ +
+ 		+ "手机号格式正确" + "手机号格式错误" +
+ + +
+ +
+ 		+ "密码格式正确" + "密码格式错误" +
+ + +
+ +
+ 		+ "两次密码一致" + "两次密码不一致" +
+ + + 男 + + 女 + + 保密 + +
+ + +
+ + + + + + +
+
+ + + +
+
+
+
+ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/js/register.js" "b/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/js/register.js" new file mode 100644 index 0000000000000000000000000000000000000000..e75e4c99aaf72908345707cfaf0aeb51ab7862ef --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220407_vue_\350\241\250\345\215\225/js/register.js" @@ -0,0 +1,52 @@ +let app = new Vue({ + el: "#app", + data: { + phoneNumber: "", + checkPhoneOK: false, + checkPhoneNotOK: false, + password: "", + checkPasswordOK: false, + checkPasswordNotOK: false, + confirmPassword: "", + PasswordOK:false, + PasswordNotOK:false, + }, + methods: { + checkPhone: function () { + // if(this.phoneNumber = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/) this.checkPhoneOK = true; + // else this.checkPhoneOK = false; + const reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; + if (reg.test(this.phoneNumber)) this.checkPhoneOK = true, this.checkPhoneNotOK = false; + else this.checkPhoneOK = false, this.checkPhoneNotOK = true; + }, + checkPassword: function () { + let reg2 = /^[a-zA-Z]{1}/; + // if(reg2.test(this.password) && this.password.length >8) this.checkPasswordOK = true; + // else this.checkPasswordNotOK = true; + if (this.password.length > 8 && reg2.test(this.password)) { + this.checkPasswordNotOK = false; + this.checkPasswordOK = true; + } else { + this.checkPasswordOK = false; + this.checkPasswordNotOK = true; + } + }, + checkPasswords: function () { + if (this.confirmPassword == this.password) { + this.PasswordOK = true; + this.PasswordNotOK = false; + } else { + this.PasswordOK = false; + this.PasswordNotOK = true; + } + }, + alert:function() { + if(this.checkPhoneOK == true && this.checkPasswordOK == true && this.PasswordOK == true) { + window.alert('注册成功！'); + } + else { + window.alert('注册失败！请检查手机号和密码格式！'); + } + } + } +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220412_vue_\347\273\204\344\273\266/index.html" "b/\350\222\213\345\256\207\350\266\205/20220412_vue_\347\273\204\344\273\266/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..49f9b0660ea60a642d3b7575877c01d1549c306d --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220412_vue_\347\273\204\344\273\266/index.html" @@ -0,0 +1,54 @@ + + + + + + + Document + + + + + +
+
+

没有一场疫情不会过去，没有一场战争不会结束

+

+ 国家卫健委4月11日通报，4月10日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增新冠肺炎本土确诊病例1164例，
+ 新增本土无症状感染者26345例。其中，上海新增本土确诊914例，本土无症状感染者25173例。 +

+
+
+ +
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220413_vue_\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211/1.html" "b/\350\222\213\345\256\207\350\266\205/20220413_vue_\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..473288ecf62fd689846470d98092e4878f6cff70 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220413_vue_\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211/1.html" @@ -0,0 +1,143 @@ + + + + + + + + + 作业 + + + +
+ + + + + t + + + + {{schoolName}} + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220413_vue_\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211/homework.html" "b/\350\222\213\345\256\207\350\266\205/20220413_vue_\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211/homework.html" new file mode 100644 index 0000000000000000000000000000000000000000..9033d14ab5799173860fd1f4a5041e954e778bc3 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220413_vue_\345\261\200\351\203\250\347\273\204\344\273\266\345\256\232\344\271\211/homework.html" @@ -0,0 +1,51 @@ + + + + + + + Document + + + + + +
+

商品列表:

+ +
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220414_vue_\345\265\214\345\245\227\347\273\204\344\273\266/4.15\350\256\262\345\220\216.html" "b/\350\222\213\345\256\207\350\266\205/20220414_vue_\345\265\214\345\245\227\347\273\204\344\273\266/4.15\350\256\262\345\220\216.html" new file mode 100644 index 0000000000000000000000000000000000000000..029823c58bf525b2c0f42875b8c65aaa30d2b845 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220414_vue_\345\265\214\345\245\227\347\273\204\344\273\266/4.15\350\256\262\345\220\216.html" @@ -0,0 +1,149 @@ + + + + + + + Document + + + + + +
+ +
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220414_vue_\345\265\214\345\245\227\347\273\204\344\273\266/commpdity.html" "b/\350\222\213\345\256\207\350\266\205/20220414_vue_\345\265\214\345\245\227\347\273\204\344\273\266/commpdity.html" new file mode 100644 index 0000000000000000000000000000000000000000..0d9963efb5522593b58ae1594adf71e03137cc8b --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220414_vue_\345\265\214\345\245\227\347\273\204\344\273\266/commpdity.html" @@ -0,0 +1,108 @@ + + + + + + + Document + + + + + +
+ +
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..25fbe96e437ad7a8125df0989ab1356426b93a77 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/font_txcpiwu31e/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..441c7468e6f40309fa1df51278d86e5b542b9c2a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + 商城 + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..70a605e678393d7f63bacdd620f5339d67c8e085 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/App.vue" @@ -0,0 +1,110 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/1.png" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..e088fea2c6326efff9d4b8a0bffa4e8bbf17d241 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/2.png" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..9bf4d219958c0484a2f1afd7c1a7c00957824b6c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/3.png" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/3.png" new file mode 100644 index 0000000000000000000000000000000000000000..829d242ff4845298379718e08971d56fd255a69d Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/3.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..400467279fb3447f3dfd4d6c59b33f477d67846c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont,[class^="icon-"],[class*=" icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/icon/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/Display.vue" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/Display.vue" new file mode 100644 index 0000000000000000000000000000000000000000..08e4f1e2e0a69a3e3b470da9e969183b261dc647 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/Display.vue" @@ -0,0 +1,47 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/HelloWorld.vue" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/HelloWorld.vue" new file mode 100644 index 0000000000000000000000000000000000000000..879051a29739fdfb17ae82ed23b53fac251c2b7e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/HelloWorld.vue" @@ -0,0 +1,58 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/List.vue" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/List.vue" new file mode 100644 index 0000000000000000000000000000000000000000..e074a6c27de637799091dd78c9b8cd94d95cd21d --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/List.vue" @@ -0,0 +1,46 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/Top.vue" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/Top.vue" new file mode 100644 index 0000000000000000000000000000000000000000..27f845194016fc8667478ab9f37c4e369edc7bb9 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/components/Top.vue" @@ -0,0 +1,102 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..0727a379037b794f25c22890dcbaa3d3a2cc4743 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/main.js" @@ -0,0 +1,9 @@ +import { createApp } from 'vue' +import App from './App.vue' +import './assets/icon/iconfont.css' + +import './components/Top.vue' +import './components/List.vue' +import './components/Display.vue' +createApp(App).mount('#app') + diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/pages/advList.vue" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/pages/advList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..d488e2e43fd0bc367550cfabd73cbeb747c8880d --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/pages/advList.vue" @@ -0,0 +1,35 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220427__wph/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..383987b56e6d813720d1d5f8ef7c3abc05efe556 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220427__wph/src/router/index.js" @@ -0,0 +1,27 @@ +// 配置路由规则 +import VueRouter from 'vue-router' +import advList from '../pages/advList' +import Display from '../components/Display' + + +// 创建并暴露一个路由器 + +export default new VueRouter ({ + routes:[ + { + path:'/' + }, + { + name:'guanggao', + path:'/one', + component: Display, + children:[ + + ] + }, + { + path:'/two', + component: List, + } + ] +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/3ce.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/3ce.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..765a82a8be17e71ca6ac0bc9c43769dd114159a0 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/3ce.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/3ce.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/3ce.webp" new file mode 100644 index 0000000000000000000000000000000000000000..af71a02a2304768fc6bd9231f1b139f97806c75b Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/3ce.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/adidas.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/adidas.webp" new file mode 100644 index 0000000000000000000000000000000000000000..fc76b00fc068509c53b664031630a797426daa5c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/adidas.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/akf.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/akf.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..108b227571bfd0ddcf78fc3ad37b83b4b8229701 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/akf.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/akf.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/akf.webp" new file mode 100644 index 0000000000000000000000000000000000000000..5db283a985fa25df72cd61c69d4d9bdb1318d9e4 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/akf.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/beijing.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/beijing.webp" new file mode 100644 index 0000000000000000000000000000000000000000..f4e85eeff04f30a8a131d816e601348593cbeb41 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/beijing.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/bottom.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/bottom.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..f621e92f6953ebe20df89be25ba59fb7f5f98b91 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/bottom.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/caidan.svg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/caidan.svg" new file mode 100644 index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/caidan.svg" @@ -0,0 +1,16 @@ + + + + icon/Hamburger + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/center.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/center.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..bdecb6a4714244d03e80b950680ddc60d632e0f3 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/center.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/gouwuche.png" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/gouwuche.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/gouwuche.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/header.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/header.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..54d2e6e9ba02ad8dff99aed8dd46c74186e69de9 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/header.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/jiantou.png" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/jiantou.png" new file mode 100644 index 0000000000000000000000000000000000000000..02daafc69d4431889d6f2c5f0a840a6f31bc5a25 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/jiantou.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/kefu.png" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/kefu.png" new file mode 100644 index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/kefu.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/kouhong.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/kouhong.webp" new file mode 100644 index 0000000000000000000000000000000000000000..eee674028853f23421e0dc4b8eba7ff4e83ba070 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/kouhong.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/lining.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/lining.webp" new file mode 100644 index 0000000000000000000000000000000000000000..e16654e08146354dcf9c27ac964c5da9bd993ec5 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/lining.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/ln.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/ln.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..3eb9ccf63838c73f17caed413e3d58430a22b408 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/ln.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/shenghuoguan.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/shenghuoguan.webp" new file mode 100644 index 0000000000000000000000000000000000000000..8b5c5cea5e7bfb7197da35e6fd7b89b6c559af54 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/shenghuoguan.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/ugg.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/ugg.webp" new file mode 100644 index 0000000000000000000000000000000000000000..ff2f726f9d2ed4c875219a5a5b2d76cfdaa89f8c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/ugg.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/weipinhui.png" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/weipinhui.png" new file mode 100644 index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/weipinhui.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/wnn.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/wnn.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..e49cca31a0d32f868788822a6b009e2e2b747928 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/wnn.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/yfl.jpg" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/yfl.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..8de0ed2a536aa3038846766884e1086f42bcae6a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/yfl.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/zhengpin.webp" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/zhengpin.webp" new file mode 100644 index 0000000000000000000000000000000000000000..86abf234fd089b7ebfc2c2d7c09b0061c450cc7c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/assets/zhengpin.webp" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/data.txt" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/data.txt" new file mode 100644 index 0000000000000000000000000000000000000000..f68adf9c8dd338eea0d29489b21ef45c86340736 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/data.txt" @@ -0,0 +1,14 @@ +{ + code:200, + data:{ + products:[ + {id:1,name:'韩国三熹玉3CE彩妆香水专场',img:'../assets/header.jpg',num:80,price:1000}, + {id:2,name:'阿迪达斯三叶草运动户外专场',img:'../assets/center.jpg',num:90,price:2000}, + {id:3,name:'UGG专场',img:'../assets/bottom.jpg',num:80,price:3000}, + {id:4,name:'伊芙丽eifini女装专场',img:'../assets/yfl.jpg',num:67,price:3000} + ] + }, + msg:'请求成功' + +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..7e495e1b87001b2b6a17598849908dc4bc6fbdf2 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/App.vue" @@ -0,0 +1,41 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/components/CartItem.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/components/CartItem.vue" new file mode 100644 index 0000000000000000000000000000000000000000..c48553db77f53431e496d896a1ff8b290c16c78a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/components/CartItem.vue" @@ -0,0 +1,77 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/components/HeaderBase.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/components/HeaderBase.vue" new file mode 100644 index 0000000000000000000000000000000000000000..6c46e28632361045b469c21c18c3df48c94cd84c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/components/HeaderBase.vue" @@ -0,0 +1,88 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/adidas.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/adidas.vue" new file mode 100644 index 0000000000000000000000000000000000000000..8fe067a09f1a02ff14144dccbca474f69b9094c0 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/adidas.vue" @@ -0,0 +1,202 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/akf.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/akf.vue" new file mode 100644 index 0000000000000000000000000000000000000000..23138e7d592667493502d1cc23279cd92c997d66 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/akf.vue" @@ -0,0 +1,202 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/lining.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/lining.vue" new file mode 100644 index 0000000000000000000000000000000000000000..48dfd1e7da19af708b5095258ff98ea2b67479d5 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/lining.vue" @@ -0,0 +1,202 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/threece.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/threece.vue" new file mode 100644 index 0000000000000000000000000000000000000000..2300dc74b2e7a4f07cab100bba56dae3eec489e9 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/threece.vue" @@ -0,0 +1,239 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/ugg.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/ugg.vue" new file mode 100644 index 0000000000000000000000000000000000000000..ff48e788b35ad11d251b32a03d2fc7aa499af339 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/detail/ugg.vue" @@ -0,0 +1,202 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..5a6fd906da4d2e4185b18127f850665c6835c9b3 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/main.js" @@ -0,0 +1,32 @@ +import Vue from 'vue' +import App from './App.vue' +// import axios from 'axios' + +//引入VueRouter +import VueRouter from 'vue-router' +//应用插件 +Vue.use(VueRouter) + +// Vue.use(axios) + + +//引入路由器 +import router from './router/index' + + +//关闭生产环境提交 +Vue.config.productionTip = false +//render 渲染 temldate +new Vue({ + el:'#app', + // template:'', + // components:{ + // App, + // } + //脚手架引入的vue是残缺的，为了性能 + render: (createElement) => { + // console.log(typeof createElement); + return createElement(App) + }, + router +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/AdvList.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/AdvList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..f6c5f89f2159d00462a99e0e6c6f0ec74f46b266 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/AdvList.vue" @@ -0,0 +1,71 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/BodyBase.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/BodyBase.vue" new file mode 100644 index 0000000000000000000000000000000000000000..632eeb0ba495302afc7c64858f4a13ba3a17ca3c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/BodyBase.vue" @@ -0,0 +1,70 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/CartList.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/CartList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..6c9ec3595762e5ca17f0155690d320283ac08256 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/CartList.vue" @@ -0,0 +1,95 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/Detail.vue" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/Detail.vue" new file mode 100644 index 0000000000000000000000000000000000000000..d3862aeeb819f694c9ee3dc0e7217b9875e6829a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/pages/Detail.vue" @@ -0,0 +1,271 @@ + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220428_wph/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..e23a1727ce5be8393a1a6cc416e2721108fae937 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220428_wph/src/router/index.js" @@ -0,0 +1,53 @@ +// 配置路由规则 +import VueRouter from 'vue-router' +//默认商品列表 +import BodyBase from '../pages/BodyBase' +//默认商品广告列表 +import AdvList from '../pages/AdvList' +import Detail from '../pages/Detail' +import CartList from '../pages/CartList' + +//创建并暴露一个路由器 +export default new VueRouter({ + routes: [ + { + path: '/', + component: BodyBase, + }, + { + path: '/base', + component: BodyBase, + }, + { + path: '/adv', + component: AdvList, + }, + { + name:'detail', + //path:'/detail', props 传递参数，query 不行 + path: '/detail/:id/:name', + component: Detail, + //props:{id:'id1',name:'name1'}, 对象写法 + props:true //bool 类型 + // props($route){// 函数的写法 + // return { + // id:$route.params.id, + // name:$route.params.name, + // img:$route.params.img + // } + // } + + }, + { + name:'cartList', + //path:'/detail', + path: '/cartList', + component: CartList, + //props:{id:'id1',name:'name1'}, 对象写法 + props:true + }, + + ] +}) + +// export default router \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..25fbe96e437ad7a8125df0989ab1356426b93a77 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/font_txcpiwu31e/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..441c7468e6f40309fa1df51278d86e5b542b9c2a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + 商城 + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..1d435a6fa0315ee78ab9ee76447fd89df139884f --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/App.vue" @@ -0,0 +1,121 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/1.png" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..e088fea2c6326efff9d4b8a0bffa4e8bbf17d241 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/2.png" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..9bf4d219958c0484a2f1afd7c1a7c00957824b6c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/3.png" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/3.png" new file mode 100644 index 0000000000000000000000000000000000000000..829d242ff4845298379718e08971d56fd255a69d Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/3.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/4.jpg" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/4.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..5e865a8cbcfbb866b45850466e03b0d4512b8bed Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/4.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/5.jpg" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/5.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..6a58c11ebf05a7b2cde30fcbfe30d9d360b961c6 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/5.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/6.jpg" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/6.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b26bd23857043c575b418ff123dd9d6f931dd422 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/6.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/7.jpg" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/7.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..42cf999c543d92fb98f26f25994857d252e716d9 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/7.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..400467279fb3447f3dfd4d6c59b33f477d67846c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont,[class^="icon-"],[class*=" icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/icon/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/Display.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/Display.vue" new file mode 100644 index 0000000000000000000000000000000000000000..618c1447354e04482a9d760623dac1d0b53036ff --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/Display.vue" @@ -0,0 +1,27 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/HelloWorld.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/HelloWorld.vue" new file mode 100644 index 0000000000000000000000000000000000000000..879051a29739fdfb17ae82ed23b53fac251c2b7e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/HelloWorld.vue" @@ -0,0 +1,58 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/List.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/List.vue" new file mode 100644 index 0000000000000000000000000000000000000000..079213b23f8152932da525d6e73ddcc3991a153a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/List.vue" @@ -0,0 +1,42 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/Top.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/Top.vue" new file mode 100644 index 0000000000000000000000000000000000000000..ad7c04cf490c08dd5c7c0e460e8937598efcf82e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/components/Top.vue" @@ -0,0 +1,102 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..3280c1eb98e99f01564d19f36d0570947d7c510a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/main.js" @@ -0,0 +1,27 @@ +import Vue from 'vue' +import App from './App.vue' +import './assets/icon/iconfont.css' + +import './components/Top.vue' +import './components/List.vue' +import './components/Display.vue' + +//引入VueRouter +import VueRouter from 'vue-router' + +//应用插件 +Vue.use(VueRouter) + +//引入路由器 +import router from './router/index' + +//关闭生产环境提交 +Vue.config.productionTip = false + +new Vue({ + el:'#app', + render:(createElement) =>{ + return createElement(App) + }, + router +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/CommodityDetail.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/CommodityDetail.vue" new file mode 100644 index 0000000000000000000000000000000000000000..f5567a5972300aa9b0420481e2036d9a3c4b65fe --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/CommodityDetail.vue" @@ -0,0 +1,30 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/CommodityList.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/CommodityList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..1e041d37312ee254b27553840972b0f2495100dc --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/CommodityList.vue" @@ -0,0 +1,111 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/advList.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/advList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..cc21000be04497f65f25fe9a9024792c3a7cccc7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/advList.vue" @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/firstPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/firstPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..7a484cde373f86d7431dd2eb5e664e5da9276fe4 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/firstPage.vue" @@ -0,0 +1,52 @@ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/secondPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/secondPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..7d8204070c855f9f739bbb30a82dda4bdb65fec0 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/pages/secondPage.vue" @@ -0,0 +1,105 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..a4b36518c41b763818f65193ac99ae0df4f8b59a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220429_wph/study/src/router/index.js" @@ -0,0 +1,46 @@ +// 配置路由规则 +import VueRouter from 'vue-router' +//引入组件 +// import advList from '../pages/advList' +import firstPage from '../pages/firstPage' +import secondPage from '../pages/secondPage' +import CommodityList from '../pages/CommodityList' +import CommodityDetail from '../pages/CommodityDetail' + +// 创建并暴露一个路由器 + +export default new VueRouter ({ + routes:[ + { + path:'/', + component:firstPage, + }, + { + path:'/firstPage', + component: firstPage, + }, + { + path:'/secondPage', + component: secondPage, + }, + { + name:'CommodityList', + path:'/CommodityList', + component: CommodityList, + props:true, + children:[ + { + path:'CommodityDetail', + component:CommodityDetail, + } + ] + }, + { + name:'CommodityDetail', + path:'/CommodityDetail/:id/:name/:price', + //path:'/detail', + component: CommodityDetail, + props:true, + } + ] +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..25fbe96e437ad7a8125df0989ab1356426b93a77 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/font_txcpiwu31e/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..441c7468e6f40309fa1df51278d86e5b542b9c2a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + 商城 + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..1d435a6fa0315ee78ab9ee76447fd89df139884f --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/App.vue" @@ -0,0 +1,121 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/1.png" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..e088fea2c6326efff9d4b8a0bffa4e8bbf17d241 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/2.png" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..9bf4d219958c0484a2f1afd7c1a7c00957824b6c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/3.png" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/3.png" new file mode 100644 index 0000000000000000000000000000000000000000..829d242ff4845298379718e08971d56fd255a69d Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/3.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/4.jpg" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/4.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..5e865a8cbcfbb866b45850466e03b0d4512b8bed Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/4.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/5.jpg" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/5.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..6a58c11ebf05a7b2cde30fcbfe30d9d360b961c6 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/5.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/6.jpg" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/6.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b26bd23857043c575b418ff123dd9d6f931dd422 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/6.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/7.jpg" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/7.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..42cf999c543d92fb98f26f25994857d252e716d9 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/7.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..400467279fb3447f3dfd4d6c59b33f477d67846c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont,[class^="icon-"],[class*=" icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon_1.png" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon_1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon_2.png" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/icon_2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/Display.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/Display.vue" new file mode 100644 index 0000000000000000000000000000000000000000..618c1447354e04482a9d760623dac1d0b53036ff --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/Display.vue" @@ -0,0 +1,27 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/HelloWorld.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/HelloWorld.vue" new file mode 100644 index 0000000000000000000000000000000000000000..879051a29739fdfb17ae82ed23b53fac251c2b7e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/HelloWorld.vue" @@ -0,0 +1,58 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/List.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/List.vue" new file mode 100644 index 0000000000000000000000000000000000000000..bfddbad01ede08360826304498e255c998f43a9f --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/List.vue" @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/Top.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/Top.vue" new file mode 100644 index 0000000000000000000000000000000000000000..975fc692feed7ac69f8f6a53e4e6db1b9face77e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/components/Top.vue" @@ -0,0 +1,94 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..3280c1eb98e99f01564d19f36d0570947d7c510a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/main.js" @@ -0,0 +1,27 @@ +import Vue from 'vue' +import App from './App.vue' +import './assets/icon/iconfont.css' + +import './components/Top.vue' +import './components/List.vue' +import './components/Display.vue' + +//引入VueRouter +import VueRouter from 'vue-router' + +//应用插件 +Vue.use(VueRouter) + +//引入路由器 +import router from './router/index' + +//关闭生产环境提交 +Vue.config.productionTip = false + +new Vue({ + el:'#app', + render:(createElement) =>{ + return createElement(App) + }, + router +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CartList.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CartList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..e94d950b1b1176aa694ac80c5cbc2febbe39a15c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CartList.vue" @@ -0,0 +1,124 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CommodityDetail.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CommodityDetail.vue" new file mode 100644 index 0000000000000000000000000000000000000000..172c06bc27ec56524db61522d7462b52067a2d8a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CommodityDetail.vue" @@ -0,0 +1,229 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CommodityList.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CommodityList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..cb9b39bf547c5e0918359e6689b5f8751c6fcef2 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/CommodityList.vue" @@ -0,0 +1,119 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/advList.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/advList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..cc21000be04497f65f25fe9a9024792c3a7cccc7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/advList.vue" @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/firstPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/firstPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..29ab5961c40d3b29903e21ec5bb6dda316b5a570 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/firstPage.vue" @@ -0,0 +1,51 @@ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/secondPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/secondPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..e855bd064ffff1054112034d854d878a02ff64d3 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/pages/secondPage.vue" @@ -0,0 +1,101 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220504_wph/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..88009420e53a57c7b60caffaa7665d42936282f0 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220504_wph/src/router/index.js" @@ -0,0 +1,52 @@ +// 配置路由规则 +import VueRouter from 'vue-router' +//引入组件 +// import advList from '../pages/advList' +import firstPage from '../pages/firstPage' +import secondPage from '../pages/secondPage' +import CommodityList from '../pages/CommodityList' +import CommodityDetail from '../pages/CommodityDetail' +import CartList from '../pages/CartList' + +// 创建并暴露一个路由器 + +export default new VueRouter ({ + routes:[ + { + path:'/', + component:firstPage, + }, + { + path:'/firstPage', + component: firstPage, + }, + { + path:'/secondPage', + component: secondPage, + }, + { + name:'CommodityList', + path:'/CommodityList', + component: CommodityList, + props:true, + children:[ + { + path:'CommodityDetail', + component:CommodityDetail, + } + ] + }, + { + name:'CommodityDetail', + path:'/CommodityDetail/:id/:name/:price', //params的传参方式 + //path:'/detail', + component: CommodityDetail, + props:true, //true会把params的参数传给props + }, + { + path:'/CartList', + component:CartList, + props:true, + } + ] +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..25fbe96e437ad7a8125df0989ab1356426b93a77 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/font_txcpiwu31e/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..441c7468e6f40309fa1df51278d86e5b542b9c2a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + 商城 + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..c3956f5bbdd4ac8828eb81fa4b3659cad84337d5 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/App.vue" @@ -0,0 +1,101 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/1.png" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..e088fea2c6326efff9d4b8a0bffa4e8bbf17d241 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/2.png" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..9bf4d219958c0484a2f1afd7c1a7c00957824b6c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/3.png" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/3.png" new file mode 100644 index 0000000000000000000000000000000000000000..829d242ff4845298379718e08971d56fd255a69d Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/3.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/4.jpg" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/4.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..5e865a8cbcfbb866b45850466e03b0d4512b8bed Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/4.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/5.jpg" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/5.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..6a58c11ebf05a7b2cde30fcbfe30d9d360b961c6 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/5.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/51.png" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/51.png" new file mode 100644 index 0000000000000000000000000000000000000000..9c01630e5e8607c907c2d8e344480f5c6f110eaf Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/51.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/6.jpg" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/6.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b26bd23857043c575b418ff123dd9d6f931dd422 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/6.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/7.jpg" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/7.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..42cf999c543d92fb98f26f25994857d252e716d9 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/7.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..400467279fb3447f3dfd4d6c59b33f477d67846c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont,[class^="icon-"],[class*=" icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon_1.png" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon_1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon_2.png" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/icon_2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/CartItem.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/CartItem.vue" new file mode 100644 index 0000000000000000000000000000000000000000..a92dceb680b044ef3d3ca9dbe11ce416a3ffafc8 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/CartItem.vue" @@ -0,0 +1,79 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/Display.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/Display.vue" new file mode 100644 index 0000000000000000000000000000000000000000..618c1447354e04482a9d760623dac1d0b53036ff --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/Display.vue" @@ -0,0 +1,27 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/HelloWorld.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/HelloWorld.vue" new file mode 100644 index 0000000000000000000000000000000000000000..879051a29739fdfb17ae82ed23b53fac251c2b7e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/HelloWorld.vue" @@ -0,0 +1,58 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/List.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/List.vue" new file mode 100644 index 0000000000000000000000000000000000000000..bfddbad01ede08360826304498e255c998f43a9f --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/List.vue" @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/Top.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/Top.vue" new file mode 100644 index 0000000000000000000000000000000000000000..975fc692feed7ac69f8f6a53e4e6db1b9face77e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/components/Top.vue" @@ -0,0 +1,94 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..3280c1eb98e99f01564d19f36d0570947d7c510a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/main.js" @@ -0,0 +1,27 @@ +import Vue from 'vue' +import App from './App.vue' +import './assets/icon/iconfont.css' + +import './components/Top.vue' +import './components/List.vue' +import './components/Display.vue' + +//引入VueRouter +import VueRouter from 'vue-router' + +//应用插件 +Vue.use(VueRouter) + +//引入路由器 +import router from './router/index' + +//关闭生产环境提交 +Vue.config.productionTip = false + +new Vue({ + el:'#app', + render:(createElement) =>{ + return createElement(App) + }, + router +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CartList.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CartList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..b11a23580f2023d6af1f6d6f63d9c24abe2325b1 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CartList.vue" @@ -0,0 +1,54 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CommodityDetail.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CommodityDetail.vue" new file mode 100644 index 0000000000000000000000000000000000000000..a23941bdacda7f9547583db9ee8ec02103ae2f02 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CommodityDetail.vue" @@ -0,0 +1,236 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CommodityList.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CommodityList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..5dc82d2af1e12ad0a83264b787abe9d4e7118f16 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/CommodityList.vue" @@ -0,0 +1,120 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/advList.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/advList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..cc21000be04497f65f25fe9a9024792c3a7cccc7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/advList.vue" @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/firstPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/firstPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..081e99ba3e299dd3d4aaaea8d93ef924bc8ced07 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/firstPage.vue" @@ -0,0 +1,52 @@ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/secondPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/secondPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..e855bd064ffff1054112034d854d878a02ff64d3 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/pages/secondPage.vue" @@ -0,0 +1,101 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220505_wph/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..af652dcbea95492b255cb254de3806956fd6ff3c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220505_wph/src/router/index.js" @@ -0,0 +1,51 @@ +// 配置路由规则 +import VueRouter from 'vue-router' +//引入组件 +import firstPage from '../pages/firstPage' +import secondPage from '../pages/secondPage' +import CommodityList from '../pages/CommodityList' +import CommodityDetail from '../pages/CommodityDetail' +import CartList from '../pages/CartList' + +// 创建并暴露一个路由器 + +export default new VueRouter ({ + routes:[ + { + path:'/', + component:firstPage, + }, + { + path:'/firstPage', + component: firstPage, + }, + { + path:'/secondPage', + component: secondPage, + }, + { + name:'CommodityList', + path:'/CommodityList', + component: CommodityList, + props:true, + children:[ + { + path:'CommodityDetail', + component:CommodityDetail, + } + ] + }, + { + name:'CommodityDetail', + path:'/CommodityDetail/:id/:name/:price', //params的传参方式 + //path:'/detail', + component: CommodityDetail, + props:true, //true会把params的参数传给props + }, + { + path:'/CartList', + component:CartList, + props:true, + } + ] +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..25fbe96e437ad7a8125df0989ab1356426b93a77 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/font_txcpiwu31e/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..441c7468e6f40309fa1df51278d86e5b542b9c2a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + 商城 + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..c3956f5bbdd4ac8828eb81fa4b3659cad84337d5 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/App.vue" @@ -0,0 +1,101 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/1.png" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..e088fea2c6326efff9d4b8a0bffa4e8bbf17d241 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/2.png" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..9bf4d219958c0484a2f1afd7c1a7c00957824b6c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/3.png" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/3.png" new file mode 100644 index 0000000000000000000000000000000000000000..829d242ff4845298379718e08971d56fd255a69d Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/3.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/4.jpg" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/4.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..5e865a8cbcfbb866b45850466e03b0d4512b8bed Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/4.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/5.jpg" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/5.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..6a58c11ebf05a7b2cde30fcbfe30d9d360b961c6 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/5.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/51.png" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/51.png" new file mode 100644 index 0000000000000000000000000000000000000000..9c01630e5e8607c907c2d8e344480f5c6f110eaf Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/51.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/6.jpg" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/6.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b26bd23857043c575b418ff123dd9d6f931dd422 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/6.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/7.jpg" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/7.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..42cf999c543d92fb98f26f25994857d252e716d9 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/7.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..400467279fb3447f3dfd4d6c59b33f477d67846c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont,[class^="icon-"],[class*=" icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon_1.png" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon_1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon_2.png" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/icon_2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/CartItem.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/CartItem.vue" new file mode 100644 index 0000000000000000000000000000000000000000..c073e33c99c5b73c6616abf99394b46ec23e43e0 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/CartItem.vue" @@ -0,0 +1,91 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/Display.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/Display.vue" new file mode 100644 index 0000000000000000000000000000000000000000..342f95be80dbcfa058099eff10ad05c2978aad83 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/Display.vue" @@ -0,0 +1,29 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/HelloWorld.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/HelloWorld.vue" new file mode 100644 index 0000000000000000000000000000000000000000..879051a29739fdfb17ae82ed23b53fac251c2b7e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/HelloWorld.vue" @@ -0,0 +1,58 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/List.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/List.vue" new file mode 100644 index 0000000000000000000000000000000000000000..bfddbad01ede08360826304498e255c998f43a9f --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/List.vue" @@ -0,0 +1,40 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/Top.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/Top.vue" new file mode 100644 index 0000000000000000000000000000000000000000..975fc692feed7ac69f8f6a53e4e6db1b9face77e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/components/Top.vue" @@ -0,0 +1,94 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..148b653befab8e5993b3dd30cc634d0d5a94bfaf --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/main.js" @@ -0,0 +1,41 @@ +import Vue from 'vue' +import App from './App.vue' +import './assets/icon/iconfont.css' + +import './components/Top.vue' +import './components/List.vue' +import './components/Display.vue' + +//引入VueRouter +import VueRouter from 'vue-router' + +//应用插件 +Vue.use(VueRouter) + +//引入路由器 +import router from './router/index'; +//VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 +// Vue的实例对象，以后简称vm。 +//console.log(Vue.prototype); //Vue的原型对象中有emit on，所以创建的vc vm才能使用emit或者on +//Vue.prototype.public = {a:1, b:2}; //每个vc vm示例中的public都是同一个对象 + +let vm = Vue.extend({}); +let obj = new vm(); +Vue.prototype.public = obj; +//关闭生产环境提交 +Vue.config.productionTip = false + +new Vue({ + el:'#app', + //脚手架引入的vue是残缺的，为了性能 + render:(createElement) =>{ + return createElement(App) + }, + beforeCreate:function() { + // Vue.prototype.public = new Vue.extend({}); + // Vue.prototype.public = this; + //创建一个组件事件，组件实例中的功能vm都有，所以Vue.prototype.public = new Vue.extend({})可以用this替换 + Vue.prototype.$bus = this;//推荐写法,bus是总线的意思，加上$是为了和vue属性的命名一致 + }, + router, +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CartList.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CartList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..ad021ce961b02671f856432af8c2c5f11e159198 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CartList.vue" @@ -0,0 +1,87 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CommodityDetail.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CommodityDetail.vue" new file mode 100644 index 0000000000000000000000000000000000000000..4b27ea135f7236e65d7fd0d490e3c308c79e361a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CommodityDetail.vue" @@ -0,0 +1,232 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CommodityList.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CommodityList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..3a9401fa8646a136d1251e6e0a67561e73c81828 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/CommodityList.vue" @@ -0,0 +1,138 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/firstPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/firstPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..081e99ba3e299dd3d4aaaea8d93ef924bc8ced07 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/firstPage.vue" @@ -0,0 +1,52 @@ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/secondPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/secondPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..f866a9129d458173a97af6662263d05e560e9fd3 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/pages/secondPage.vue" @@ -0,0 +1,98 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220510_wph/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..af652dcbea95492b255cb254de3806956fd6ff3c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220510_wph/src/router/index.js" @@ -0,0 +1,51 @@ +// 配置路由规则 +import VueRouter from 'vue-router' +//引入组件 +import firstPage from '../pages/firstPage' +import secondPage from '../pages/secondPage' +import CommodityList from '../pages/CommodityList' +import CommodityDetail from '../pages/CommodityDetail' +import CartList from '../pages/CartList' + +// 创建并暴露一个路由器 + +export default new VueRouter ({ + routes:[ + { + path:'/', + component:firstPage, + }, + { + path:'/firstPage', + component: firstPage, + }, + { + path:'/secondPage', + component: secondPage, + }, + { + name:'CommodityList', + path:'/CommodityList', + component: CommodityList, + props:true, + children:[ + { + path:'CommodityDetail', + component:CommodityDetail, + } + ] + }, + { + name:'CommodityDetail', + path:'/CommodityDetail/:id/:name/:price', //params的传参方式 + //path:'/detail', + component: CommodityDetail, + props:true, //true会把params的参数传给props + }, + { + path:'/CartList', + component:CartList, + props:true, + } + ] +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..3e5a13962197105f2078d2a224cc57dfa09b4893 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + <%= htmlWebpackPlugin.options.title %> + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..25fbe96e437ad7a8125df0989ab1356426b93a77 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/font_txcpiwu31e/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..441c7468e6f40309fa1df51278d86e5b542b9c2a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/public/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + 商城 + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..947d114e243ef3fb90cf94146b156986beb6972c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/App.vue" @@ -0,0 +1,29 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/1.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..e088fea2c6326efff9d4b8a0bffa4e8bbf17d241 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/2.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..9bf4d219958c0484a2f1afd7c1a7c00957824b6c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/3.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/3.png" new file mode 100644 index 0000000000000000000000000000000000000000..829d242ff4845298379718e08971d56fd255a69d Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/3.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/4.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/4.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..5e865a8cbcfbb866b45850466e03b0d4512b8bed Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/4.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/5.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/5.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..6a58c11ebf05a7b2cde30fcbfe30d9d360b961c6 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/5.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/51.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/51.png" new file mode 100644 index 0000000000000000000000000000000000000000..9c01630e5e8607c907c2d8e344480f5c6f110eaf Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/51.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/6.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/6.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b26bd23857043c575b418ff123dd9d6f931dd422 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/6.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/7.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/7.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..42cf999c543d92fb98f26f25994857d252e716d9 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/7.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/caidan.svg" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/caidan.svg" new file mode 100644 index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/caidan.svg" @@ -0,0 +1,16 @@ + + + + icon/Hamburger + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..400467279fb3447f3dfd4d6c59b33f477d67846c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont,[class^="icon-"],[class*=" icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon_1.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon_1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon_2.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/icon_2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/weipinhui.png" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/weipinhui.png" new file mode 100644 index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/assets/weipinhui.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/components/HelloWorld.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/components/HelloWorld.vue" new file mode 100644 index 0000000000000000000000000000000000000000..879051a29739fdfb17ae82ed23b53fac251c2b7e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/components/HelloWorld.vue" @@ -0,0 +1,58 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/components/TopBase.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/components/TopBase.vue" new file mode 100644 index 0000000000000000000000000000000000000000..e93755a54552e07311d668020415301382437e4f --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/components/TopBase.vue" @@ -0,0 +1,131 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..015f603ec43087c4d8846d66788b53163be297de --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/main.js" @@ -0,0 +1,20 @@ +import Vue from 'vue' +import App from './App.vue' +import './components/TopBase' + +//引入VueRouter +import VueRouter from 'vue-router' +Vue.use(VueRouter) + +//引入路由器 +import router from './router/index' + +Vue.config.productionTip = false + +new Vue({ + el:'#app', + render:(createElement) =>{ + return createElement(App) + }, + router +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/CommodityDetail.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/CommodityDetail.vue" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/CommodityList.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/CommodityList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..09370b3759f8bd8019dd0eae26cb069d94ff24f2 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/CommodityList.vue" @@ -0,0 +1,128 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/firstPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/firstPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..081e99ba3e299dd3d4aaaea8d93ef924bc8ced07 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/firstPage.vue" @@ -0,0 +1,52 @@ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/secondPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/secondPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..b1bf9170b8dcc0b09e37302c70846c19b447a3c7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/pages/secondPage.vue" @@ -0,0 +1,103 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..68192d96df4c00ed000e330c75798f81c2db3146 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_pra\346\226\260/src/router/index.js" @@ -0,0 +1,30 @@ +//配置路由规则 +import VueRouter from 'vue-router' +//引入组件 +import firstPage from '../pages/firstPage' +import secondPage from '../pages/secondPage' +import CommodityList from '../pages/CommodityList' + +//创建并暴露一个路由器 +export default new VueRouter({ + routes: [ + { + path: '/', + component: firstPage, + }, + { + path: '/firstPage', + component: firstPage, + }, + { + path: '/secondPage', + component: secondPage, + }, + { + name: 'CommodityList', + path: '/CommodityList', + component: CommodityList, + props: true, + }, + ] +}) \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/favicon.ico" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/favicon.ico" new file mode 100644 index 0000000000000000000000000000000000000000..df36fcfb72584e00488330b560ebcf34a41c64c2 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/favicon.ico" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..25fbe96e437ad7a8125df0989ab1356426b93a77 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/font_txcpiwu31e/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/public/index.html" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/index.html" new file mode 100644 index 0000000000000000000000000000000000000000..441c7468e6f40309fa1df51278d86e5b542b9c2a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/public/index.html" @@ -0,0 +1,17 @@ + + + + + + + + 商城 + + + +
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/App.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/App.vue" new file mode 100644 index 0000000000000000000000000000000000000000..3d3d7b53856fd181c15d3966c54e9266a20c662c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/App.vue" @@ -0,0 +1,96 @@ + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/1.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/1.png" new file mode 100644 index 0000000000000000000000000000000000000000..e088fea2c6326efff9d4b8a0bffa4e8bbf17d241 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/2.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/2.png" new file mode 100644 index 0000000000000000000000000000000000000000..9bf4d219958c0484a2f1afd7c1a7c00957824b6c Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/3.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/3.png" new file mode 100644 index 0000000000000000000000000000000000000000..829d242ff4845298379718e08971d56fd255a69d Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/3.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/4.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/4.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..5e865a8cbcfbb866b45850466e03b0d4512b8bed Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/4.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/5.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/5.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..6a58c11ebf05a7b2cde30fcbfe30d9d360b961c6 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/5.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/51.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/51.png" new file mode 100644 index 0000000000000000000000000000000000000000..9c01630e5e8607c907c2d8e344480f5c6f110eaf Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/51.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/6.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/6.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b26bd23857043c575b418ff123dd9d6f931dd422 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/6.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/7.jpg" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/7.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..42cf999c543d92fb98f26f25994857d252e716d9 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/7.jpg" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/caidan.svg" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/caidan.svg" new file mode 100644 index 0000000000000000000000000000000000000000..3a6d9c203a36a74137db6b8b7b2a5878f7bc6295 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/caidan.svg" @@ -0,0 +1,16 @@ + + + + icon/Hamburger + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/demo.css" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/demo.css" new file mode 100644 index 0000000000000000000000000000000000000000..a67054a0a030993643b8cbe9f344b34706efa134 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.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; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.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 { + 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 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; +} + +.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; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/demo_index.html" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/demo_index.html" new file mode 100644 index 0000000000000000000000000000000000000000..abca2015a69b80f1b83ca7073ef765ca55f44125 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/demo_index.html" @@ -0,0 +1,207 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    应用
    +
    &#xe658;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1650533474259') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 应用 +
    +
    .icon-yingyong +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    应用
    +
    #icon-yingyong
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.css" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.css" new file mode 100644 index 0000000000000000000000000000000000000000..400467279fb3447f3dfd4d6c59b33f477d67846c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.css" @@ -0,0 +1,17 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1650533474259') format('truetype'); +} + +.iconfont,[class^="icon-"],[class*=" icon-"] { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-yingyong:before { + content: "\e658"; +} + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.js" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.js" new file mode 100644 index 0000000000000000000000000000000000000000..3177e1194fa52d0faa86d999673f8e95bd94d112 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.js" @@ -0,0 +1 @@ +!function(e){var t,n,a,o,i,d='',c=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss"),s=function(e,t){t.parentNode.insertBefore(e,t)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}function l(){i||(i=!0,a())}function m(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(m,50)}l()}t=function(){var e,t=document.createElement("div");t.innerHTML=d,d=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?s(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(a=t,o=e.document,i=!1,m(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,l())})}(window); \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.json" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.json" new file mode 100644 index 0000000000000000000000000000000000000000..3a39c5b66e8079f4d8381c808928eddfc2b5114a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.json" @@ -0,0 +1,16 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3365990", + "name": "应用", + "font_class": "yingyong", + "unicode": "e658", + "unicode_decimal": 58968 + } + ] +} diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.ttf" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cc5f9388cb1b7ff689a47bc147162a9f08a9243a Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon/iconfont.ttf" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon_1.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon_1.png" new file mode 100644 index 0000000000000000000000000000000000000000..287067b3367844ac099da07b436ef349ec3a9b77 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon_1.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon_2.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon_2.png" new file mode 100644 index 0000000000000000000000000000000000000000..03b74b36bd6036bc749b76c43273f3ae6e6dd70e Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/icon_2.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/logo.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/logo.png" new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/logo.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/weipinhui.png" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/weipinhui.png" new file mode 100644 index 0000000000000000000000000000000000000000..85b8b783d037ed0f9132e2ad8bac7ff514bea144 Binary files /dev/null and "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/assets/weipinhui.png" differ diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/CartItem.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/CartItem.vue" new file mode 100644 index 0000000000000000000000000000000000000000..c073e33c99c5b73c6616abf99394b46ec23e43e0 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/CartItem.vue" @@ -0,0 +1,91 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/HelloWorld.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/HelloWorld.vue" new file mode 100644 index 0000000000000000000000000000000000000000..879051a29739fdfb17ae82ed23b53fac251c2b7e --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/HelloWorld.vue" @@ -0,0 +1,58 @@ + + + + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/TopBase.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/TopBase.vue" new file mode 100644 index 0000000000000000000000000000000000000000..e93755a54552e07311d668020415301382437e4f --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/components/TopBase.vue" @@ -0,0 +1,131 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/main.js" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/main.js" new file mode 100644 index 0000000000000000000000000000000000000000..729e6a9453ad4fe01177bcd287c69dc3803e8fe9 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/main.js" @@ -0,0 +1,40 @@ +import Vue from 'vue' +import App from './App.vue' +import './assets/icon/iconfont.css' + +import './components/TopBase.vue' + + +//引入VueRouter +import VueRouter from 'vue-router' + +//应用插件 +Vue.use(VueRouter) + +//引入路由器 +import router from './router/index'; +//VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。 +// Vue的实例对象，以后简称vm。 +//console.log(Vue.prototype); //Vue的原型对象中有emit on，所以创建的vc vm才能使用emit或者on +//Vue.prototype.public = {a:1, b:2}; //每个vc vm示例中的public都是同一个对象 + +let vm = Vue.extend({}); +let obj = new vm(); +Vue.prototype.public = obj; +//关闭生产环境提交 +Vue.config.productionTip = false + +new Vue({ + el:'#app', + //脚手架引入的vue是残缺的，为了性能 + render:(createElement) =>{ + return createElement(App) + }, + beforeCreate:function() { + // Vue.prototype.public = new Vue.extend({}); + // Vue.prototype.public = this; + //创建一个组件事件，组件实例中的功能vm都有，所以Vue.prototype.public = new Vue.extend({})可以用this替换 + Vue.prototype.$bus = this;//推荐写法,bus是总线的意思，加上$是为了和vue属性的命名一致 + }, + router, +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CartList.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CartList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..ad021ce961b02671f856432af8c2c5f11e159198 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CartList.vue" @@ -0,0 +1,87 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CommodityDetail.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CommodityDetail.vue" new file mode 100644 index 0000000000000000000000000000000000000000..4b27ea135f7236e65d7fd0d490e3c308c79e361a --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CommodityDetail.vue" @@ -0,0 +1,232 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CommodityList.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CommodityList.vue" new file mode 100644 index 0000000000000000000000000000000000000000..795e41df05245c5037b9c261b4a667ca33da1588 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/CommodityList.vue" @@ -0,0 +1,138 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/firstPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/firstPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..361f300c6f2bdb0ab4c112c38176f8c16e9aa3db --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/firstPage.vue" @@ -0,0 +1,53 @@ + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/secondPage.vue" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/secondPage.vue" new file mode 100644 index 0000000000000000000000000000000000000000..d9355f82821ff396a58e670ba532c953227011a7 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/pages/secondPage.vue" @@ -0,0 +1,113 @@ + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220511_wph/src/router/index.js" "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/router/index.js" new file mode 100644 index 0000000000000000000000000000000000000000..af652dcbea95492b255cb254de3806956fd6ff3c --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220511_wph/src/router/index.js" @@ -0,0 +1,51 @@ +// 配置路由规则 +import VueRouter from 'vue-router' +//引入组件 +import firstPage from '../pages/firstPage' +import secondPage from '../pages/secondPage' +import CommodityList from '../pages/CommodityList' +import CommodityDetail from '../pages/CommodityDetail' +import CartList from '../pages/CartList' + +// 创建并暴露一个路由器 + +export default new VueRouter ({ + routes:[ + { + path:'/', + component:firstPage, + }, + { + path:'/firstPage', + component: firstPage, + }, + { + path:'/secondPage', + component: secondPage, + }, + { + name:'CommodityList', + path:'/CommodityList', + component: CommodityList, + props:true, + children:[ + { + path:'CommodityDetail', + component:CommodityDetail, + } + ] + }, + { + name:'CommodityDetail', + path:'/CommodityDetail/:id/:name/:price', //params的传参方式 + //path:'/detail', + component: CommodityDetail, + props:true, //true会把params的参数传给props + }, + { + path:'/CartList', + component:CartList, + props:true, + } + ] +}) diff --git "a/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/bootstrapdemo.html" "b/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/bootstrapdemo.html" new file mode 100644 index 0000000000000000000000000000000000000000..6e3a8a740f422f86f0a9a29b5264653b893c6a6d --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/bootstrapdemo.html" @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + demo + + + + +
+ + + + + +
+
11111111111111111111111111
+
22222222222222222222222222
+
+ +
+ + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" "b/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" new file mode 100644 index 0000000000000000000000000000000000000000..873250fe55c7631c5267685315120629553d2825 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/\345\223\215\345\272\224\345\274\217\345\216\237\347\220\206.html" @@ -0,0 +1,45 @@ + + + + + + + 响应式原理 + + + +
+ 我是内容 +
+ + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200.md" "b/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..a509d6bf6f44d25b136fc80781c8732e39b5fe89 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220516bootstrap/7\347\217\255\345\244\215\344\271\240/\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200.md" @@ -0,0 +1,46 @@ +**响应式布局的原理** + +媒体查询 @media + +**bootstrap 是自适应的框架** + +网站的后台系统较多 + +**环境搭建** + +方案1 下载 + +方案2 cdn + +bootstrap 的样式都是基于class 实现 + +**设备的划分** + +超小屏幕 手机 (<768px) + +小屏幕 平板 (≥768px) + +中等屏幕 桌面显示器 (≥992px) + +大屏幕 大桌面显示器 (≥1200px + +bootstrap 会把屏幕划分为12等分 + +如果要标识，某个区块的大小，可以加入 class col-(设备的一个简写 xs--超小屏 sm ---小屏 md ---中等屏 lg---大屏)-（数值） + +数值表示的12等份中所占的比例 + +如果尾数的数值和不足12，会有相应的等份空余，如果和大于12会另起一行 + +**嵌套列中子元素所占的比例是以父元素为基点** + +**响应式工具** + +针对不同设备展示或隐藏页面内容 + +``` +visible-(设备简称 如 xs)-(block，inline，inline-block) + +``` + +作业：把 bootstrap 记一记，写一些 diff --git "a/\350\222\213\345\256\207\350\266\205/20220517_js\346\225\260\347\273\204\345\216\273\351\207\215/1.html" "b/\350\222\213\345\256\207\350\266\205/20220517_js\346\225\260\347\273\204\345\216\273\351\207\215/1.html" new file mode 100644 index 0000000000000000000000000000000000000000..11638f6b6a129d821fee064d48e97474129b9843 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517_js\346\225\260\347\273\204\345\216\273\351\207\215/1.html" @@ -0,0 +1,27 @@ + + + + + + + Document + + + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/bootstrapt.md" "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/bootstrapt.md" new file mode 100644 index 0000000000000000000000000000000000000000..ceeb5588736e4a08793ed75b7c3196f973184e52 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/bootstrapt.md" @@ -0,0 +1,25 @@ +**表格** + +table 自适应的class +table-striped 斑马条纹样式 +table-hover 鼠标悬停 +table-condensed 紧缩表格 +table-bordered 边框 + +**表单** + +form-group 与 form-control 来控制样式 + +内联表单：元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件 + +**模态框** + +要有模块框建立对象关系，通过 data-target，元素需为button. + +**实施工程师** +1.产品的安装与维护与指导，技术咨询、沟通及交流 +2.产品的bug与反馈 +3.产品开发的调研 + + + diff --git "a/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/js\345\217\230\351\207\217.md" "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/js\345\217\230\351\207\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..7bc7a84fa572b3696b45ad8a8ba3334bcdf27754 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/js\345\217\230\351\207\217.md" @@ -0,0 +1,14 @@ +**字面量** + +var 和 let 的区别？ + +var 可以变量提升，作用域不一致，var 可以重复申明，let不行 + + +**js的数据类型** + +数据类型：Number,String,boolean,Object,Undefined,Null + +Number:整数，浮点 + +怎么去判断一个变量时哪种类型的？ diff --git "a/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\345\217\230\351\207\217.html" "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\345\217\230\351\207\217.html" new file mode 100644 index 0000000000000000000000000000000000000000..0af21783ea42ba682d0802202eb26299e7fcd69b --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\345\217\230\351\207\217.html" @@ -0,0 +1,57 @@ + + + + + + + 字面量 + + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\346\250\241\346\200\201\346\241\206.html" "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\346\250\241\346\200\201\346\241\206.html" new file mode 100644 index 0000000000000000000000000000000000000000..e35e3bef2cd90b582a8e330491075cd82299602b --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\346\250\241\346\200\201\346\241\206.html" @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + Document + +表格 + + + +
+ + + +
点击
+ + + +
+ + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\205\276\350\256\257\351\235\242\350\257\225\351\242\230.html" "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\205\276\350\256\257\351\235\242\350\257\225\351\242\230.html" new file mode 100644 index 0000000000000000000000000000000000000000..9b6962ee04d0beca03ec0c903640a35c74d3ef95 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\205\276\350\256\257\351\235\242\350\257\225\351\242\230.html" @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\241\250\345\215\225.html" "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\241\250\345\215\225.html" new file mode 100644 index 0000000000000000000000000000000000000000..9f94a3de7541e5cd3e4f7bb0ec3631f1c9803e80 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\241\250\345\215\225.html" @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + Document + +表格 + + + +
+ +
+ + +
+
+ + +
+
+ + +

Example block-level help text here.

+
+
+ +
+ + +
+ +
+
+ + +
+
+ + + +
+
+ + +
+ + + +
+ + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\241\250\346\240\274.html" "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\241\250\346\240\274.html" new file mode 100644 index 0000000000000000000000000000000000000000..261cbbb4df3d1cb664d5e32c6bd540bcd72e7ff8 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220517bootstrap/7\347\217\255\345\244\215\344\271\240/\350\241\250\346\240\274.html" @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + Document + +表格 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Optional table caption.
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220518/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213.html" "b/\350\222\213\345\256\207\350\266\205/20220518/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213.html" new file mode 100644 index 0000000000000000000000000000000000000000..681b89206679ba76c1346c07e1367cfdbecdc2db --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220518/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213.html" @@ -0,0 +1,90 @@ + + + + + + + + Document + + + + + + + + \ No newline at end of file diff --git "a/\350\222\213\345\256\207\350\266\205/20220518/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213.md" "b/\350\222\213\345\256\207\350\266\205/20220518/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..ab30135e4dbf472b2f917c8a54b60b1291779a28 --- /dev/null +++ "b/\350\222\213\345\256\207\350\266\205/20220518/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213/\345\237\272\347\241\200\346\225\260\346\215\256\347\261\273\345\236\213.md" @@ -0,0 +1,117 @@ +**undefined** + +申明了变量，但是没赋值， + +``` +let num; + +console.log(num); + +if(num){//转化为false + // + console.log(111);//不执行 +} + +``` + +**null** + +表示没值 +``` +let num = null; + +console.log(typeof num);//输出的是object，js的bug，js 认为null是空对象指针 + +if(num){//转为false + +} + +``` +**boolean** + +真假，true 和 false ，大写不行(True 于 False) + +**string** + +js字符串使用 unicode 存储，2个字节 + +``` +let st1='1111' +let st2 = '中文a' +console.log(st2.length); //3 || 7 length 指的是字符的个数 + +``` + +有哪些函数与属性？ + +``` +// legth 返回字符个数 + +// indexOf 在字符串中查找指定的字符串，如果存在返回下标，如果不存在返回 -1 + +// lastIndexOf + +// split 分割转化为数组 + +// charAt 返回指定位置的字符 + +// subStr 截取字符串 + +// join 数组转为字符串 + +``` + +字符串可以按数组的方式去访问. + +**Number** + +包含了 整数，浮点 + +Number 有上限吗？有 Number.MAX_VALUE + +``` +//浮点是不精确的,跟语言无关 +console.log(0.1+0.2);// +//把其它数据类型转成number +let numstr='101';// parseInt,number + + +``` + +**哪些情况下会转为true 与false** + +``` +let num; +if(num){//转为false + +} + +num=0 + +if(num){//false + +} + +num='0'; + +if(num){//0的字符串转化为true + +} + +let str='';//转为false + +let num11 = 'ASS'; + +if (Number(num11)) {// Nan 转为false + console.log('Nan true 或是 false') +} + + + +``` + +**作业:讲过的写写，有时间的看看 java，vue** + + + +