问题描述
我正在尝试制作这样的旋转木马。
但我不知道如何使图像像图片一样重叠在 div 的顶部。 我也不知道如何将按钮放在带有文本的 div 中。 这是我已经做的
这是我的代码 `
import SwiftUI
import Combine
struct ContentView: View {
@State var celsius: String = ""
@State var kelvin: String = ""
@State var farenheit: String = ""
@State var reyumur: String = ""
@State var rankin: String = ""
var body: some View {
NavigationView {
Temperature(celsius: $celsius,kelvin: $kelvin,farenheit: $farenheit,reyumur: $reyumur,rankin: $rankin)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Temperature: View {
@Binding var celsius: String
@Binding var kelvin: String
@Binding var farenheit: String
@Binding var reyumur: String
@Binding var rankin: String
var body: some View {
List {
Section(
header: Text("Международная система (СИ)")) {
HStack {
TextField("Enter value",text: $celsius)
.keyboardType(.numbersAndPunctuation)
.onReceive(Just(celsius)) { newValue in
let filtered = newValue.filter { "0123456789.".contains($0) }
if filtered != newValue {
self.celsius = filtered
}
}
Text("°C")
.padding(.horizontal)
.font(.headline)
.foregroundColor(.blue)
}
HStack {
TextField("Enter value",text: $kelvin)
.keyboardType(.numbersAndPunctuation)
.onReceive(Just(kelvin)) { newValue in
let filtered = newValue.filter { "0123456789.".contains($0) }
if filtered != newValue {
self.kelvin = filtered
}
}
Text("K")
.padding(.horizontal)
.font(.headline)
.foregroundColor(.blue)
}
}
Section(
header: Text("США и Британия")) {
HStack {
TextField("Enter value",text: $farenheit)
.keyboardType(.numbersAndPunctuation)
.onReceive(Just(farenheit)) { newValue in
let filtered = newValue.filter { "0123456789.".contains($0) }
if filtered != newValue {
self.farenheit = filtered
}
}
Text("F")
.padding(.horizontal)
.font(.headline)
.foregroundColor(.blue)
}
}
Section(
header: Text("Редкоиспользуемые")) {
HStack {
TextField("Enter value",text: $reyumur)
.keyboardType(.numbersAndPunctuation)
.onReceive(Just(reyumur)) { newValue in
let filtered = newValue.filter { "0123456789.".contains($0) }
if filtered != newValue {
self.reyumur = filtered
}
}
Text("Re")
.padding(.horizontal)
.font(.headline)
.foregroundColor(.blue)
}
HStack {
TextField("Enter value",text: $rankin)
.keyboardType(.numbersAndPunctuation)
.onReceive(Just(rankin)) { newValue in
let filtered = newValue.filter { "0123456789.".contains($0) }
if filtered != newValue {
self.rankin = filtered
}
}
Text("R")
.padding(.horizontal)
.font(.headline)
.foregroundColor(.blue)
}
}
}
.navigationBarTitle("Temperature")
.navigationBarTitledisplayMode(.inline)
}
}
这是我的 scss（使用 sass）
import { useState } from "react";
import Slider from "react-slick";
import "./contentcarousel.scss"
import img1 from "./img/feature-checkin.png"
import img2 from "./img/feature-scanqr.png"
const ContentCarousel = (props) => {
const [slides,setSlides] = useState([1,2]);
const [data,setData] = useState([
["Step 1","On your Home tab,Check In as you click on the coin available that day.",img1],["Step 2","Your Check In is Successful! Come back tomorrow for more reward points.",img2]
])
const [button,setButton] = useState("left")
const create = () => {
setSlides([1,2])
setData([
["Step 1",img2]
])
setButton("left")
}
const pause = () => {
setSlides([1,"On your Reward tab,Select Mission.","Select on Weekly,Biweekly,or Monthly to see the missions and its Progress. When the mission is accomplished,you can Collect Point.",img2]
])
setButton("middle")
}
const stop = () => {
setSlides([1,Select Redeem Point.","Claim the vouchers that you want.",img2]
])
setButton("right")
}
const settings = {
dots: true,infinite: true,speed: 500,slidesToShow: 1,slidesToScroll: 1,customPaging: (i) => (
<div
style={{
left: "10px",width: "10px",height: "10px",borderRadius: "20px",backgroundColor: "#c4c4c4"
}}
></div>
),};
return (
<div className="content-carousel p-5">
<div className="mb-4">
{button === "left" ?
<button className="px-3 py-1 btn-carousel-left btn-carousel-active" onClick={create}>
Create
</button>:
<button className="px-3 py-1 btn-carousel-left " onClick={create}>
Create
</button>
}
{button === "middle" ?
<button className="px-3 py-1 btn-carousel-middle btn-carousel-active" onClick={pause}>
Pause
</button> :
<button className="px-3 py-1 btn-carousel-middle" onClick={pause}>
Pause
</button>
}
{button === "right" ?
<button className="px-3 py-1 btn-carousel-right btn-carousel-active" onClick={stop}>
Stop
</button> :
<button className="px-3 py-1 btn-carousel-right" onClick={stop}>
Stop
</button>
}
</div>
<Slider {...settings}>
{slides.map(function(slide) {
return (
<div className="content-carousel-card p-5" key={slide}>
<div className="text-Box p-5">
<h3 style={{fontSize:"20px"}}>{data[slide-1][0]}</h3>
<h3 style={{fontSize:"20px"}} className="b-700">{data[slide-1][1]}</h3>
</div>
<div className="img-Box">
<img src={data[slide-1][2]} alt=""/>
</div>
</div>
);
})}
</Slider>
</div>
)
}
export default ContentCarousel
希望你们能帮我解决css问题 先谢谢了！
解决方法
我主要使用CSS Flexbox来完成你的设计。
<Slider {...settings}>
{slides.map(function (slide) {
return (
<div className="content-carousel-card p-5" key={slide}>
{/* Add this wrapper to handle the style of the item */}
<div className="card-content-wrapper">
<div className="text-box p-5">
<h3 style={{ fontSize: "20px" }}>{data[slide - 1][0]}</h3>
<h3 style={{ fontSize: "20px" }} className="b-700">
{data[slide - 1][1]}
</h3>
</div>
<div className="img-box">
<img src={data[slide - 1][2]} alt="" width="200" height="300" />
</div>
</div>
</div>
);
})}
</Slider>;
.content-carousel {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
.slick-controls {
position: absolute;
z-index: 1;
top: 53px;
left: 60px;
}
.content-carousel-card {
.card-content-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
padding: 0 60px;
&:before {
content: '';
display: block;
position: absolute;
z-index: 1;
width: calc(100% - 2px);
height: calc(100% - 50px);
top: 50%;
transform: translateY(-50%);
border: 1px solid #000;
left: 0px;
border-radius: 50px;
}
.text-box {
padding-right: 50px;
}
}
}
}
注意 - 请谨慎对待您的内容。在部署到生产环境之前，请务必在最坏的情况下检查此布局。
https://codesandbox.io/s/elated-raman-lvq34?file=/src/contentcarousel.scss
如果您需要进一步的支持，请告诉我。