教程开始：

一、首先修改ripro/inc/codestar-framework/options目录下options.theme.php文件

找到660左右的// 会员开通引导模块或直接全局搜索“// 会员开通引导模块”，

一直到

// 列表设置

全部替换成内容！注意备份原文件否则有问题我也救不了你 哈哈

[cc lang=”php”] // 会员开通引导模块
array(
‘id’ => ‘home_vip_mod’,
‘type’ => ‘fieldset’,
‘title’ => ‘会员开通引导模块’,
‘fields’ => array(

array(
‘id’ => ‘vip_group’,
‘type’ => ‘group’,
‘title’ => ‘添加介绍’,
‘max’ => ‘3’,
‘fields’ => array(
array(
‘id’ => ‘_time’,
‘type’ => ‘text’,
‘title’ => ‘时长’,
‘default’ => ‘一个月’,
),
array(
‘id’ => ‘_price’,
‘type’ => ‘text’,
‘title’ => ‘价格’,
‘default’ => ’10’,
),
array(
‘id’ => ‘_tehui’,
‘type’ => ‘text’,
‘title’ => ‘优惠信息’,
‘default’ => ‘限时优惠’,
),
array(
‘id’ => ‘_vipms01’,
‘type’ => ‘text’,
‘title’ => ‘描述1’,
‘default’ => ”,
),
array(
‘id’ => ‘_vipms02’,
‘type’ => ‘text’,
‘title’ => ‘描述2’,
‘default’ => ”,
),
array(
‘id’ => ‘_color’,
‘type’ => ‘color’,
‘title’ => ‘模块自定义主颜色’,
‘desc’ => ”,
‘default’ => ‘#34495e’,
),
),
),

),
),

),
));

//
// 列表设置[/cc]

二、找到ripro/assets/css目录下div.css文件

在div.css文件内最下方插入内容！

[cc lang=”css”]
/*VIP*/
.container .row .card {
border: solid 1px #e5e5e5;
width: 23.5%;
background-color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 12px;
}

.container .row .card.active {
box-shadow: 4px 8px 40px 0 rgba(0, 0, 0, .1)
}/*.container .row .card:not(:last-of-type) {*/
.container .row .card {
margin: 10px;
}

.container .row .card.ent-base:hover {
transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
}

.container .row .card.ent-base {
transition: all .3s ease-out;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
}

.container .row .card.ent-base .btn {
background-image: -webkit-linear-gradient(bottom, #fff 30%, #fff);
background-image: linear-gradient(to top, #fff 30%, #fff)
}

.container .row .card .version {
font-weight: 700
}

.container .row .header {
border-radius: 12px 12px 0 0;
color: #fff;
font-size: 14px;
line-height: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding-top: 23px;
font-weight: 300;
z-index: 1;
}

.container .row .header .price-year {
margin-top: 12px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
font-weight: 400
}

.container .row .header .pricing-deco {
width: 100%;
}

.container .row .header .price-year .dollar {
font-size: 18px;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
margin-top: 3px;
font-weight: 300
}

.container .row .header .price-year .price {
font-size: 46px;
letter-spacing: 1.7px;
font-weight: 700;
font-family: Helvetica
}

.container .row .header .price-quarter {
font-size: 12px;
margin: 5px auto 17px
}

.container .row .header .btn {
width: 160px;
/*line-height: 12px;*/
border-radius: 2px;
color: rgba(0, 0, 0, .7);
font-size: 14px;
border: 0;
font-weight: 500;
font-family: PingFangSC;
cursor: pointer
}

.container .row .header .btn:hover {
box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .14)
}

.container .row .content {
position: relative;
font-size: 12px;
/* padding-top: 24px; */
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
z-index: 99;
top: -10px;
background-color: #fff;
}

.container .row .content .desc {
line-height: 1;
padding-left: 37px;
margin-bottom: 18px;
color: rgba(62, 62, 62, .8);
position: relative
}

.container .row .content .desc:before {
position: absolute;
content: “”;
height: 6px;
width: 9px;
border: 2px solid #3e3e3e;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 20%;
left: 16px;
border-top: 0;
border-right: 0;
opacity: .6;
filter: alpha(opacity=60)
}

@media screen and (max-width: 1450px) {
.container .row .card {width: 23.2%}
}
@media screen and (max-width: 750px) {
.container .row .card {width: 100%}
}
@media (min-width: 1460px) {
.container .row .card {
width: 23.5%;
}
}

.container .row .pricing-deco .deco-layer {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.container .row .pricing-deco:hover .deco-layer–1 {
-webkit-transform: translate3d(15px,0,0);
transform: translate3d(15px,0,0);
}

.container .row .pricing-deco:hover .deco-layer–2 {
-webkit-transform: translate3d(-15px,0,0);
transform: translate3d(-15px,0,0);
}[/cc]

三、找到ripro/parts/home-mode目录下vip.php文件

将vip.php的内容全部替换成内容！

[cc lang=”php”]

[/cc]