静态网页：
//第一种方法<p>&emsp&emsp第一段</p>
<p>&emsp&emsp第二段</p>
//第二种
<style>p{text-index:2em}</style>
<p>第一段</p>
<p>第二段</p>
动态网页，有个差不多的编辑器，会直接编辑好保存到数据库，直接输出即可
<template>
<view>
<view class="topview">
<!--分段器 导航跳转不同组件 -->
<view class="uni-padding-wrap uni-common-mt">
<uni-segmented-control :current="current"
:values="items.map(v =>v.title)"
style-type="text"
:active-color="activeColor"
@clickItem="onClickItem"></uni-segmented-control>
</view>
</view>
<view class="content">
<view v-if="current === 0">
<!-- 导航组件页面 -->
<co-shebaoview
:isShow="isShowClass"
:param="cParamList"
@seldelect="seldelects"
@selpay="selpays"></co-shebaoview>
</view>
<view v-if="current === 1">
<!-- 导航组件页面 -->
<co-pingzhengview
:isShow="isShowClassP"
:param="cParamListP"
@seldelectP="seldelectP"
@selpayP="selpayP"></co-pingzhengview>
</view>
</view>
</view>
</template>
<script>
// 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用
// 引入
// import coshebaoview from "../../components/co-shebaoview/co-shebaoview.vue"
// import copingzhengview from "../../components/co-pingzhengview/co-pingzhengview.vue"
export default {
// 注册组件
// components: {
// coshebaoview,
// copingzhengview
// },
data () {
return {
// 上个页面传递数据
djxh: '',
<script>
// 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用
// 引入
// import coshebaoview from "../../components/co-shebaoview/co-shebaoview.vue"
// import copingzhengview from "../../components/co-pingzhengview/co-pingzhengview.vue"
export default {
// 注册组件
// components: {
// coshebaoview,
// copingzhengview
// },
data () {
return {
// 上个页面传递数据
djxh: '',
nsrsbh: '',
xm: '',
sfzjhm: '',
// 分段选择器数据
items: [{
title: "待缴税费"
},
{
title: "待缴凭证"
},
],
current: 0,
colorIndex: 0,
activeColor: '#168DE9',
//传递给页面数据
isShowClass: true,
isShowClassP: true,
cParamList: [],
cParamListP: [],
indexs: 0,
ztlx: '2'
}
},
methods: {
//获取查询数据 待缴
getdataSB () {
var me = this
let url = this.configURL.hnserverUrl + '/dzswj/externalService/JSONNOLOGIN/sscx_sscx'
//获取存储值
const value = uni.getStorageSync('carinfo_key')
//判断当前是否有该存储值
if (value.isLogin) {
//读取存储对象对应的值
me.xm = value.userInfo.xm
me.sfzjhm = value.userInfo.sfzjhm
me.djxh = value.userInfo.djxh
}
this.http.httpRequest(url, 'POST', {
xm: me.xm,
djxh: me.aes_encrypt(me.djxh),
nsrsbh: me.aes_encrypt(me.sfzjhm),
ywlx: 'qsxx',
// S 税 F 费 不写好像都查询
cxlx: '',
// 企业 1 个人2
ztlx: me.ztlx
}).then(res =>{
console.log("==========获取待缴数据========")
console.log(res)
me.cParamList = []
if (res.status === "Y") {
if (res.o) {
me.isShowClass = false
me.cParamList = res.o
} else {
me.isShowClass = true
uni.showToast({
title: '暂无数据！',
duration: 2000
})
}
} else {
me.isShowClassP = true
if (me.configURL.isNullstr(res.msg.msg)) {
uni.showToast({
title: "数据请求失败！",
duration: 2000
})
} else {
uni.showToast({
title: res.msg.msg,
duration: 2000
})
}
}
})
},
onLoad (option) {
console.log('onLoad=====>数据加载')
this.xm = this.aes_decrypt(option.xm)
this.sfzjhm = this.aes_decrypt(option.sfzjhm)
if (!this.configURL.isNullstr(option.ztlx)) {
this.ztlx = option.ztlx
}
},
onShow () {
//获取存储值
const value = uni.getStorageSync('carinfo_key')
//判断当前是否有该存储值
if (value.isLogin) {
if (value.userInfo.sfzjhm === this.sfzjhm) {
if (this.current === 0) {
console.log('待缴税费费onLoad')
this.getdataSB()
} else {
console.log('待缴凭证onLoad')
this.getdataPZ()
}
} else {
this.getLogin()
}
} else {
this.getLogin()
}
},
onReady () {
console.log('onReady=====>界面渲染完成')
}
}
</script>
<style lang="scss">
@import url("daijiaoSF.css")
</style>
nsrsbh: '',
xm: '',
sfzjhm: '',
// 分段选择器数据
items: [{
title: "待缴税费"
},
{
title: "待缴凭证"
},
],
current: 0,
colorIndex: 0,
activeColor: '#168DE9',
//传递给页面数据
isShowClass: true,
isShowClassP: true,
cParamList: [],
cParamListP: [],
indexs: 0,
ztlx: '2'
}
},
methods: {
//获取查询数据 待缴
getdataSB () {
}
// 作废
seldelectP (e) {
console.log('作废成功', e)
this.getdataPZ()
},
//申报
selpayP (e) {
console.log('点击了申报e=====>', e)
var arrlist = this.cParamListP[e]
console.log('点击了申报arrlist=====>', arrlist)
// var canshu = '?pzxh=' + arrlist.dzsphm +
// '&nsrsbh=' + this.sfzjhm +
// '&swjgdm=' + arrlist.swjgDm +
// '&username=' + this.xm +
// '&djxh=' + this.djxh +
// '&SorF=' + arrlist.feiOrShui +
// '&navdelta=' + '1' +
// '&bqybtse=' + arrlist.yhdpzje
var datas = {
"pzxh": arrlist.dzsphm,
"nsrsbh": this.sfzjhm,
"swjgdm": arrlist.swjgDm,
"username": this.xm,
"djxh": this.djxh,
"SorF": arrlist.feiOrShui,
"navdelta": '1',
"bqybtse": arrlist.yhdpzje
}
uni.navigateTo({
url: '../carinfo/paySelect/paySelect?params=' + this.aes_encrypt(JSON.stringify(datas))
})
},
// 隐私登录
getLogin () {
let url = this.configURL.hnserverUrl + '/dzswj/login'
var username = this.xm
var password = this.sfzjhm
const value = uni.getStorageSync('carinfo_key')
//判断当前是否有该存储值
if (value.isLogin) {
//读取存储对象对应的值
username = value.userInfo.xm
password = value.userInfo.sfzjhm
}
this.http.httpRequest(url, 'POST', {
username: username,
password: password,
mobileLogin: "on",
loginType: "1",
t: "30",
khdlx: "applet",
}).then(res =>{
console.log("login接到的数据===", res)
if (res.status === "Y") {
const ures = res.o
var storeusers = {}
storeusers.loginName = ures.loginName
storeusers.sfsmrz = ures.sfsmrz
storeusers.sessionid = ures.sessionid
if (ures.sfsmrz === 'Y' &&ures.smrzBean) {
storeusers.djxh = this.aes_decrypt(ures.smrzBean.djxh)
storeusers.sfzjhm = this.aes_decrypt(ures.smrzBean.zjhm)
storeusers.xm = this.aes_decrypt(ures.smrzBean.xm)
}
uni.setStorage({
key: 'carinfo_key',
data: {
//保存的内容
userInfo: storeusers,
sessionid: ures.sessionid,
userid: storeusers.sfzjhm,
isLogin: true,
sessiontimeout: 'N'
},
success: () =>{
this.getdataSB()
}
})
} else {
uni.showToast({
title: "暂无数据！",
duration: 2000
})
}
})
},
},
onLoad (option) {
console.log('onLoad=====>数据加载')
this.xm = this.aes_decrypt(option.xm)
this.sfzjhm = this.aes_decrypt(option.sfzjhm)
if (!this.configURL.isNullstr(option.ztlx)) {
this.ztlx = option.ztlx
}
},
onShow () {
//获取存储值
const value = uni.getStorageSync('carinfo_key')
//判断当前是否有该存储值
if (value.isLogin) {
if (value.userInfo.sfzjhm === this.sfzjhm) {
if (this.current === 0) {
console.log('待缴税费费onLoad')
this.getdataSB()
} else {
console.log('待缴凭证onLoad')
this.getdataPZ()
}
} else {
this.getLogin()
}
} else {
this.getLogin()
}
},
onReady () {
console.log('onReady=====>界面渲染完成')
}
}
</script>
<style lang="scss">
@import url("daijiaoSF.css")
</style>
首先，你要明确css的可视化盒子模型——里面任何元素的显示都是盒子。元素分为块元素和内联元素。块元素的显示是这样的：沿页面垂直向下排列，每个盒子都尽可能的宽，除非限制盒子宽度，否则这个块元素的内容将充满这个页面。标签<p>是块元素，所以段落是以每个p为块，沿页面排列的。其次，段落与段落之间的距离就是两个盒子之间的距离。调整盒子之间的距离要调整盒子的margin属性。
最后，margin属性在设置上下距离也就是垂直距离的时候，一定要注意重叠问题。就是两个盒子的垂直距离取上边盒子的margin-bottom和下边盒子的margin-top中的最大值！。而水平排列的盒子的水平距离的话，是左边盒子margin-right和右边盒子的margin-left之和！。切记。
望采纳!
