Commit b247b812 by Sweet Zhang

微信吸粉活动页面

parent 86fb1da6
yd-activity
\ No newline at end of file
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
</profile>
</component>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JsFlowSettings">
<service-enabled>false</service-enabled>
<exe-path />
<annotation-enable>false</annotation-enable>
<other-services-enabled>false</other-services-enabled>
</component>
<component name="ProjectInspectionProfilesVisibleTreeState">
<entry key="Project Default">
<profile-state>
<expanded-state>
<State>
<id />
</State>
</expanded-state>
<selected-state>
<State>
<id>TypeScript</id>
</State>
</selected-state>
</profile-state>
</entry>
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/occupationQry.iml" filepath="$PROJECT_DIR$/.idea/occupationQry.iml" />
</modules>
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/../marketing-ad/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/../marketing-ad/temp" />
<excludeFolder url="file://$MODULE_DIR$/../marketing-ad/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
.container {
letter-spacing: 1px;
color: #889393;
line-height: 1.6;
font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
padding: 30px;
}
.container > h6 > span:first-child {
display: inline-block;
border: 1px solid #b5b5b5;
border-radius: 20px;
padding: 2px 5px;
margin-right: 15px;
}
.container > h6 > strong {
color: #576b95;
font-size: 20px;
margin-right: 15px;
}
.container > .content-title {
font-size: 22px;
color: rgb(73, 59, 92);
}
.header-transition {
width: 100%;
text-align: center;
}
.header-transition > .header-transition-tips {
display: flex;
justify-content: center;
align-items: center;
padding-right: 30px;
margin-top: 40px;
margin-bottom: 10px;
}
.header-transition > .header-transition-tips .arrow-up {
width: 30px;
height: 30px;
border: 2px solid #4a4a4a;
border-radius: 50%;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.header-transition > .header-transition-tips .arrow-up > img {
width: 30px;
}
.header-transition > .header-transition-slogan {
border: 1px solid #8a8a8a;
padding: 30px 0px;
}
.header-transition > .header-transition-slogan > .title {
background: rgba(87, 107, 149, 0.1);
width: 70%;
font-size: 2em;
color: rgb(87, 107, 149);
letter-spacing: 2px;
margin: 0 auto 20px;
padding: 15px;
}
.header-transition > .header-transition-slogan .wxIcon {
width: 22px;
margin-right: 15px;
}
.header-transition .header-transition-wx {
display: flex;
justify-content: center;
}
.line{
position: relative;
}
.line:after {
position: absolute;
content: '';
left: 0;
right: 0;
bottom: -5px;
border-top: 1px solid rgb(87, 107, 149);
width: 100%;
height: 0;
margin: 0 auto;
}
.line:before {
position: absolute;
content: '';
left: 0;
right: 0;
bottom: -12px;
border-top: 4px solid rgb(87, 107, 149);
width: 100%;
height: 0;
margin: 0 auto;
}
.marketing-content {
margin-bottom: 30px;
}
.marketing-content > .content-title > p {
font-style: italic;
font-weight: bold;
font-size: 17px;
text-align: justify;
white-space: normal;
max-width: 100%;
min-height: 1em;
letter-spacing: 0.544px;
box-sizing: border-box !important;
overflow-wrap: break-word !important;
}
.marketing-content > .content-title > p:first-child {
color: rgb(73, 59, 92);
margin-bottom: 10px;
}
.marketing-content > .content-title > p:last-child {
color: rgb(51, 51, 51);
}
.marketing-content > .content-title > p:last-child {
margin-bottom: 30px;
}
.viewBtn {
display: flex;
justify-content: center;
margin-bottom: 6px;
margin-top: -46px;
padding-top: 50px;
position: absolute;
left: 0;
top: 0;
width: 100%;
background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 1) 70%);
}
.wx-subscription {
font-size: 24px;
color: #fff;
font-weight: bold;
background-color: #09bb07;
text-align: center;
height: 70px;
line-height: 70px;
border-radius: 10px;
margin-top: 35px;
position: absolute;
width: 100%;
top: 20px;
}
.wx-subscription-container {
padding: 0 15px;
border: 1px solid #000;
margin-top: 20px;
}
.wx-subscription-container > h5 {
background: rgba(87, 107, 149, 0.1);
width: 70%;
font-size: 2em;
color: rgb(87, 107, 149);
letter-spacing: 2px;
padding: 15px;
text-align: center;
margin: 15px auto 20px;
}
.wx-subscription-container > h6 {
position: relative;
margin-bottom: 50px;
}
.wx-subscription > img {
width: 40px;
margin-right: 10px;
}
.article-content {
color: #4a4a4a;
}
.article-content > h5 {
color: #6260b1;
font-weight: bold;
font-size: 18px;
}
.article-content > p {
position: relative;
margin-bottom: 30px;
}
.article-content > p > span {
border-bottom: 1px solid #4a4a4a;
}
footer {
display: flex;
justify-content: center;
align-items: center;
}
footer > .wxIcon {
width: 30px;
margin-right: 15px;
}
footer > div {
padding: 30px 0;
}
.cursor-pointer {
cursor: pointer;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(-20px);
}
}
@-ms-keyframes fadeInUp {
0% {
opacity: 1;
-ms-transform: translateY(20px);
}
100% {
opacity: 1;
-ms-transform: translateY(-20px);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 1;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(-20px);
}
}
@keyframes fadeInUp {
0% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(-20px);
}
}
.fadeInUp {
animation: fadeInUp 1.5s infinite;
}
#dialog {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
#dialog .dialog-content {
width: 500px;
height: 500px;
background-color: #fff;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
border-radius: 20px;
margin: 13% auto;
}
#dialog .dialog-content h5 {
font-size: 22px;
font-weight: bold;
color: #4a4a4a;
}
/* 小屏幕(平板,大于等于 768px) */
@media (max-width: 750px) {
.header-transition > .header-transition-slogan > .title, .wx-subscription-container > h5 {
font-size: 18px;
font-weight: bold;
}
#dialog .dialog-content {
width: 300px;
height: 300px;
}
#dialog .dialog-content h5 {
font-size: 16px;
}
#dialog img {
width: 150px;
}
.header-transition .header-transition-wx:before, .wx-subscription-container > h6:before,
.header-transition .header-transition-wx:after, .wx-subscription-container > h6:after {
width: 50%;
}
.wx-subscription {
font-size: 20px;
}
}
\ No newline at end of file
$(document).ready(function () {
$(".cursor-pointer").click(function () {
$('#dialog').show();
});
$('#dialog').click(function (e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && elem.id == 'dialog-content') {
return;
}
elem = elem.parentNode;
}
$('#dialog').css('display', 'none'); //点击的不是div或其子元素
})
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment