Skip to content

[platform] l***超 提交组件改动：hxsd #803

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[platform] l***超 提交组件改动：hxsd #803

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions sites/hxsd/.editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
UTF-8
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
root = true
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.{js,styl,html,json,vue}]
indent_size = 2
indent_style = space
[*.md]
trim_trailing_whitespace = false
2 changes: 2 additions & 0 deletions sites/hxsd/.eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist
node_modules
39 changes: 39 additions & 0 deletions sites/hxsd/.eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
{
"parser": "vue-eslint-parser",
"parserOptions": {
"ecmaVersion": 8,
"sourceType": "module",
"allowImportExportEverywhere": false
},
"extends": [
"standard",
"plugin:vue/recommended"
],
"plugins": [
"jsdoc"
],
"globals": {
"MIP": true
},
"env": {
"browser": true
},
"rules": {
"jsdoc/check-param-names": 1,
"jsdoc/check-tag-names": 1,
"jsdoc/check-types": 1,
"jsdoc/newline-after-description": 1,
"jsdoc/no-undefined-types": 1,
"jsdoc/require-description-complete-sentence": 0,
"jsdoc/require-example": 0,
"jsdoc/require-hyphen-before-param-description": 0,
"jsdoc/require-param": 1,
"jsdoc/require-param-description": 1,
"jsdoc/require-param-name": 1,
"jsdoc/require-param-type": 1,
"jsdoc/require-returns-description": 1,
"jsdoc/require-returns-type": 1,
"jsdoc/valid-types": 1,
"no-var": 2
}
}
Empty file added sites/hxsd/common/.gitkeep
View file
Open in desktop
Empty file.
34 changes: 34 additions & 0 deletions sites/hxsd/components/mip-hxsdhc-example/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# mip-hcGo-example

标题|内容
获取视窗后内容自适应|主要是实现获取视窗宽度后内容自适应，字体内容以自适应的比例展示。
类型|通用
支持布局|responsive,fixed-height,fill
所需脚本| 无依赖脚本

## 说明
根据获取到视窗的宽度然后内容、字体自适应。
Copy link
Collaborator

@clark-t clark-t Sep 17, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

请查看 mip-rem 这个官方组件的相关文档

如：设计稿宽度为640时，css写法为：width:6.4rem
750的时候：width:7.5rem
以除以100的比例缩放。


## 示例
js：
let width = document.documentElement.clientWidth || document.body.clientWidth;
let fontSize = (100 / hcClintWidth) * width;
// 代码示例
Html框架无变化，主要依靠css以px为单位的进行缩，css的写法以rem出现。

## 属性

### 属性1

**说明**：
获取视窗宽度后根据设计稿尺寸，内容进行自适应。
**必选项**：
是
**单位**：
rem

**默认值**：
287 changes: 287 additions & 0 deletions sites/hxsd/components/mip-hxsdhc-example/example/mip-hxsdhc-example.html
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions sites/hxsd/components/mip-hxsdhc-example/mip-hxsdhc-example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
function hcGo(){
var hcClintWidth = 640;
var hcWidth = document.body.offsetWidth;
var htmlFont = document.querySelectorAll('html')[0]
function getFontSize(){
var width = document.documentElement.clientWidth || document.body.clientWidth;
var fontSize = (100 / hcClintWidth) * width;
return fontSize;
};
htmlFont.style.fontSize = getFontSize() + "px";
window.onresize = function () {
setTimeout(function () {
htmlFont.style.fontSize = getFontSize() + "px";
},100)
};
}hcGo()
26 changes: 26 additions & 0 deletions sites/hxsd/example/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
<title>MIP page</title>
<link rel="canonical" href="对应的原页面地址">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
/* 自定义样式 */
h2 {
margin: 50px auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2>First MIP page</h2>
<h2>Add MIP components here</h2>
<mip-example></mip-example>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="/mip-example/mip-example.js"></script>
</body>
</html>
249 changes: 249 additions & 0 deletions sites/hxsd/mip-hxsdhc-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html mip>
<head>
<meta charset="utf-8">
<meta mip-name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no">
<title>MIP page</title>
<link rel="canonical" href="https://wap.hxsd.com/ztkc/hmxbb190621">
<link rel="stylesheet" href="https://c.mipcdn.com/static/v2/mip.css">
<style mip-custom>
.mip-line_01{width:6.4rem;height:4.8rem; background:url(../../../static/bg_01.jpg) top center no-repeat / cover;}
.mip-bg{width:6.4rem;background:url(../../../static/bg.jpg) top center no-repeat / cover; overflow:hidden;}
.mip-title1{font-size:.4rem;color:#716ef6; text-align:center; font-weight:bold;padding-top:1rem;}
.mip-content{width:5.8rem; background-color:#FFF; border-radius:.2rem; margin:.65rem auto 0;padding:.1rem 0; overflow:hidden;}
.mip-cont-bg{width:5.8rem; background-color:#FFF; overflow:hidden;border-radius:.2rem; margin:0 auto;padding-bottom:.4rem;}
.mip-title2{width:fit-content; margin:0 auto;padding-top:.6rem; overflow:hidden;}
.mip-box{width:.2rem; height:.2rem;background:url(../../../static/round.jpg) top center no-repeat /cover; float:left; margin-top:.08rem;}
.mip_tex{font-size:.3rem;color:#0a5de7; float:left;padding:0 .2rem; line-height:.34rem; font-weight:bold;}
.mip_tex span{font-size:.24rem;}
.mip-title-bg{width:1.99rem; height:.56rem;background:url(../../../static/title_bg.jpg) top center no-repeat /cover; text-align:center; font-size:.26rem; line-height:.56rem;color:#FFF; margin:.4rem auto 0;font-weight:bold;}
.mip-judge{width:5.4rem; margin:0 auto;padding-top:.5rem;}
.mip-judge li{width:1.64rem; float:left; margin:0 .2rem .4rem 0; overflow:hidden;}
.mip-judge li:nth-child(3n){margin-right:0;}
.mip-judge li .mip-pos{width:1.64rem; height:1.64rem; margin:0 auto;}
.mip-judge li .mip-jgname{font-size:.22rem;color:#494949; text-align:center;padding-top:.2rem; font-weight:bold;}
.mip-judge li .mip-coy{width:2rem; height:.45rem; margin:.1rem auto 0;}
.mip-judge li .mip-msg{width:1.5rem;font-size:.18rem;color:#494949;padding-top:.12rem; line-height:.26rem; text-align:justify; margin:0 auto;}
.mip-judge li .mip-year{ font-size:.18rem;color:#494949; text-align:center; padding-top:.12rem;}
.mip-judge li .mip-logo{width:1.33rem; height:.46rem; margin:.13rem auto 0;}
.mip-cont-nrp{font-size:.22rem;color:#494949; line-height:.38rem; margin-top:.3rem;}
.mip-auto{border-bottom:.03rem solid #616cdd; font-size:.24rem;color:#0a83ff;width:1.5rem; height:.4rem; margin-top:.3rem; margin:0 auto;}
.mip-pcert{width:5.36rem;height:3.66rem; margin:.4rem auto 0;}
.mip-pcert2{width:5.33rem;height:2.28rem; margin:.4rem auto 0;}
.mip-flow{width:5.59rem; height:4.8rem; margin:.5rem auto .5rem;}
.mip-downmip-logo{height:5.89rem; background:url(../../../static/xzlogo.jpg) top center no-repeat / cover;}
.mip-text-cont{padding:0 .3rem; text-align:justify;}
</style>
</head>
<body>
<div>
<mip-example>

<div class="mip-line_01"></div>
<div class="mip-bg">
<div class="mip-title1">四大参赛主题，让你脱颖而出</div>
<div class="mip-content">
<div class="mip-title2">
<div class="mip-box"></div>
<div class="mip_tex">不设命题 自由创作赛区</div>
<div class="mip-box"></div>
</div>
<div class="mip-title-bg">赛制规则：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
1.每位学员仅可报名一个单项赛事，依据单项赛事的主题创作提供高清作品.<br>
2.海选赛以各校区为独立单元，挑选10%的作品，进入入围赛.<br>
3.入围赛从各校区选送的10%的入围作品中，评选10个优秀作品进入决赛.<br>
4.决赛阶段从10个作品中，通过学员现场提案演讲进行最终的评奖.<br>
</div>
</div>
<div class="mip-title-bg">奖项设置：</div>
<div class="mip-cont-nrp">
<div class="mip-auto">获奖学员奖励</div>
<div class="mip-pcert"><mip-img src="../../../static/jx1.jpg"></mip-img></div>
<div class="mip-auto mip-mg-t55">指导教师奖励</div>
<div class="mip-pcert2"><mip-img src="../../../static/jx2.jpg"></mip-img></div>
</div>
</div>
</div>
<div class="mip-bg">
<div class="mip-title1">赛事评委</div>
<div class="mip-content">
<ul class="mip-judge">
<li>
<div class="mip-pos"><mip-img src="../../../static/pos1.jpg"></<mip-img></div>
<div class="mip-jgname">乔铮</div>
<div class="mip-logo"><mip-img src="../../../static/logo1.jpg"></<mip-img></div>
<div class="mip-msg">木疙瘩运营中心执行总监。曾负责国务院客户端、新华社、人民日报、华为、谷歌等项目。</div>
</li>
<li>
<div class="mip-pos"><mip-img src="../../../static/pos2.jpg"></<mip-img></div>
<div class="mip-jgname">徐谭谭</div>
<div class="mip-logo"><mip-img src="../../../static/logo1.jpg"></<mip-img></div>
<div class="mip-msg">木疙瘩运营中心高校合作负责人。曾负责新华社、人民日报、华为、人民教育出版社等媒体及出版社的H5项目。</div>
</li>
<li>
<div class="mip-pos"><mip-img src="../../../static/pos3.jpg"></<mip-img></div>
<div class="mip-jgname">王爱学</div>
<div class="mip-logo"><mip-img src="../../../static/logo2.jpg"></<mip-img></div>
<div class="mip-msg">微博品牌运营中心设计经理。多年4A品牌设计经验，主导了微博之夜、让红包飞等大型项目的视觉及创意工作。</div>
</li>
<li>
<div class="mip-pos"><mip-img src="../../../static/pos4.jpg"></<mip-img></div>
<div class="mip-jgname">陈川</div>
<div class="mip-year"><strong>互动媒体学院院长</strong></div>
<div class="mip-msg">主导火星网多个项目/网络产品的建设和管理，具有多年的网站建设与项目管理经验。</div>
</li>
<li>
<div class="mip-pos"><mip-img src="../../../static/pos5.jpg"></<mip-img></div>
<div class="mip-jgname">刘刈</div>
<div class="mip-year"><strong>10年行业经验</strong></div>
<div class="mip-msg">伯明翰艺术设计研究生学历。Looker London<br>（英国）创始人，禾生品牌公司创始人。</div>
</li>
<li>
<div class="mip-pos"><mip-img src="../../../static/pos6.jpg"></<mip-img></div>
<div class="mip-jgname">苏煜</div>
<div class="mip-year"><strong>15年行业经验</strong></div>
<div class="mip-msg">受邀参加“2013韩国illustｒator学会北京邀请展”，多次受邀担任“全国职业院校信息技能技术大赛”裁判。</div>
</li>
</ul>
</div>
</div>
<div class="mip-bg">
<div class="mip-title1">「城市与减灾」杯防灾减灾<br>作品征集大赛</div>
<div class="mip-content">

<div class="mip-title2">
<div class="mip-box"></div>
<div class="mip_tex">公益广告「韧性城市·减灾+我」</div>
<div class="mip-box"></div>
</div>
<div class="mip-title-bg">参赛要求：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
1、创意及设计：表现内容不限，但需要体现主题思想.<br>
2、要求：海报作品尺寸最大不超过90*60cm.<br>
3、作品必须为原创，作品不得侵犯第三人的包括著作权、肖像权、名誉权、隐私权等在内的任何权利.<br>
4、作品如含有暴力、色情、宗教禁忌等法律所不允许的内容，不予参评.<br>
</div>
</div>
<div class="mip-title-bg">评选标准：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
<p align="center">1、主题明确、构思新颖<br></p>
<p align="center">2、配色合理，协调准确<br></p>
<p align="center">3、文字属性，合理匹配</p><br>
</div>
</div>
</div>
</div>


<div class="mip-bg">
<div class="mip-title1">新浪微博“带着微博去旅行”<br>运营设计大赛</div>
<div class="mip-content">
<div class="mip-title2">
<div class="mip-box"></div>
<div class="mip_tex">围绕提供的需求文档设计</div>
<div class="mip-box"></div>
</div>
<div class="mip-title-bg">参赛要求：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
1、设计一张全幅面主KV，文字内容为“带着微博去旅行” 英文标题“Go on a trip with weibo” 尺寸为1920x1080px.<br>
2、风格不限，体现活动的调性，突出活动品牌.<br>
3、可以适当突出表现短视频的特征元素.<br>
4、请于作品征集期间 2019年6月12日——2019年8月5日，将参赛作品提交给带班老师.<br>
</div>
</div>
<div class="mip-title-bg">评选标准：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
1、创意及设计<br>
符合店铺调性、产品气质；有自身独特的创意和设计风格，作品内容视觉效果突出，符合目标消费者审美需求.<br>
2、光影及透视<br>
合成创意作品，光影和透视要合理、自然，符合自然规律.<br>
3、风格符合目标定位<br><br>
</div>
</div>
</div>
</div>


<div class="mip-bg">
<div class="mip-title1">木疙瘩通用模版征集大赛</div>
<div class="mip-content">
<div class="mip-title2">
<div class="mip-box"></div>
<div class="mip_tex">自由命题，体现正能量</div>
<div class="mip-box"></div>
</div>
<div class="mip-title-bg">参赛要求：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
1.目标用户： 媒体、普通用户.<br>
2.模版类型： 新闻报道、热点事件营销模版.<br>
3.交互形式不限，纯展示类H5、游戏、测试均可.<br>
4.制作轻量级H5作品，大小在10M以内.<br>
5、请于作品征集期间 2019年6月12日——2019年8月5日，将参赛作品提交给带班老师.<br>
</div>
</div>
<div class="mip-title-bg">评选标准：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
1、创意及设计<br>
有独特的创意和设计风格，作品内容视觉效果突出.<br>
2、动画及交互<br>
动画设计符合运动规律，有自己的想法，交互设计注重用户体验，操作简单清晰.<br>
3、可用性<br>
作品适合用于通用模版的制作，可编辑性强.<br>
设计风格体现活动调性，突出活动品牌.<br><br>
</div>
</div>
</div>
</div>


<div class="mip-bg">
<div class="mip-title1">小凉帽国际绘本创作大赛</div>
<div class="mip-content">
<div class="mip-title2">
<div class="mip-box"></div>
<div class="mip_tex">以“小凉帽”形象作为创作对象</div>
<div class="mip-box"></div>
</div>
<div class="mip-title-bg">参赛要求：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
“小凉帽”（别称/ 昵称：凉帽宝宝、小凉帽姐妹）基本形象<br>
① 小凉帽：6 岁，头戴传统的客家凉帽，是小凉帽魔法的第N 代传人，也是小凉帽系列IP 的主体形象。<br>
② 阿妹：是最快乐的小天使，最开心的事情<br>
1、创作的故事必须为未公开发表过的原创故事.<br>
2、作品可以是已经完成的完整绘本，也可以是尚未完成的部分绘本.<br>
3、每件参赛作品至少提供不包括封面在内的10张图像（电子文件，画面上需要有绘本故事文字）.<br>
</div>
</div>
<div class="mip-title-bg">评选标准：</div>
<div class="mip-cont-nrp">
<div class="mip-text-cont">
1、组委会有权拒受任何对各国文化或道德有侵犯以及不符合参赛要求的作品.<br>
2、故事需逻辑清晰，积极健康.<br>
3、创作的手法和表现形式不限.<br><br>
</div>
</div>
</div>
</div>
<div class="mip-bg">
<div class="mip-title1">参赛作品提交及评选流程</div>
<div class="mip-content">
<div class="mip-flow"><mip-img src="../../../static/jxsz.jpg"></mip-img></div>
</div>
</div>
<div class="mip-downmip-logo"></div>

</mip-example>
</div>
<script src="https://c.mipcdn.com/static/v2/mip.js"></script>
<script src="../mip-hxsdhc.js"></script>
</body>
</html>
Loading