hwnc/pagesE/pages/user/problem/problem.vue

<template>
	<view :class="[AppTheme]">
		<view style="padding-top: 10px">
			<view class="header" v-for="item in helpList" :key="item.id">
				<view class="header-fle" @click="showContent(item.content)">
					<view style="display: flex; height: 11px; align-items: center">
						<view class="out  bg-primary">?</view>
						<text class="why">{{ item.title || "一万个为什么" }}</text>
						<image class="jt_img" :src="settingFile.root_img+'/static/app/imgs/mine/27.png'" alt="" />
					</view>
				</view>
			</view>
			<u-empty margin-top="60" style="height: 0% !important;width: 100vw;" v-if="helpList.length == 0" text="暂无更多数据	" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import mineApi from "@/api/mine/index.js";
	export default {
		  data() {
		    return {
		      primary:this.$theme.primary,
		      flag: true,
			  settingFile:getApp().globalData.siteinfo,
		      helpList: [],
		    }
		  },
		  onShow() {
		    this.gethelp()
		  },
		  methods: {
		    gethelp() {
		      let that = this
			  mineApi.aboutquestion().then(res=>{
				  this.helpList=res.data
			  })
		    },
		    showContent(con) {
				let content = con.replace(/\<img src="/gi,`<img style='width:100%;display:block' src="${this.settingFile.root_rich_img}`)

				/* 因页面传参，限制参数长度，存储vueX */
				this.$store.commit('setProblem_co',content)
				//跳转详情
				uni.navigateTo({
					url:"/pagesE/pages/user/problem/problem_det/problem_det"
				})
		    }
		  }
	}
</script>

<style lang="scss">
.header {
  width: 100%;
  min-height: 70rpx;
  margin: 0 auto;
  background: #fff;
  padding-top: 30rpx;
  margin-bottom: 20rpx;
  position: relative;
}

.header-fle {
  height: 44rpx;
  padding-left: 40rpx;
}

header p {
  font-size: 1.7rem;
  font-weight: bold;
  color: #333;
  position: absolute;
  bottom: 12rpx;
  left: 50%;
  transform: translateX(-50%);
}

.out {
  width: 36rpx;
  height: 34rpx;
  position: relative;
  color: #ffffff;
  text-align: center;
  font-size: 28rpx;
  line-height: 34rpx;
  border-radius: 4rpx;
  margin-right: 14rpx;
}

.out::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  // border-left: 8rpx solid transparent;
  // border-right: 8rpx solid transparent;
  // border-top: 8rpx solid $tab-color-2;
  border-width: 8rpx;
  border-style: solid;
  left: 27%;
  top: 34rpx;
}

.why {
  width: 600rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 8rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  line-height: 40rpx;
  // margin-top: 10rpx;
}

/* .delta {
    width: 0;
    height: 0;
    border: 8px solid;
    border-color: transparent transparent #93A0B0;
    float: right;
    position: absolute;
    right: 25px;
    top: 24px;
} */

.con-num p {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(96, 104, 116, 1);
  line-height: 36rpx;
  margin-left: 40rpx;
  padding-bottom: 20rpx;
}

/* .delta2 {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #93A0B0;
    position: absolute;
    right: 25px;
    top:24px;
} */

footer {
  margin-top: 360rpx;
  text-align: center;
  color: red;
  font-size: 24rpx;
}

.jt_img {
  width: 58rpx;
  height: 58rpx;
  position: absolute;
  top: 50rpx;
  margin-top: -34rpx;
  right: 24rpx;
}

.lanxikf {
  width: 100%;
  height: 90rpx;
  background: #ff4841;
  position: fixed;
  bottom: 0;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  color: white;
}
</style>